我不得不稍微重构您的代码以使其工作并更清晰。它并没有完全按照您在请求中描述的那样做，但我想说您应该重新考虑您的期望，因为例如当您不点击任何触发器时，只需将鼠标悬停在上方，您最终应该会得到与悬停之前相同的状态，但在您的描述中，它看起来不像那样。
其他说明：
- 首先，您不能对 onmouseover 和 click 事件使用相同的函数（除非您向它们传递不同的参数），因为您希望在这些事件上发生不同的事情。
- 根据您的描述，您似乎需要 3 个不透明度值才能使线条不可见、半可见和可见。我还假设默认情况下所有线条都是不可见的。
- 我也修复了你的重置按钮。
-
updateheader() 有点乱，所以为了清楚起见，我把它注释掉了。
总体而言，代码现在可以工作，但远非完美。您可能希望致力于清晰和更高级别的抽象，而不是重复相同的代码部分。祝你好运。
所以这里是http://jsfiddle.net/A7edV/3/:
var button = document.getElementById('trigger');
var map = L.mapbox.map('map', 'ejs06003.ilb3d7on', {
zoomControl: false
}).setView([41.766431, -72.700585], 11);
var geojson = [{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[-72.700585, 41.766431],
[-72.701112, 41.585276]
]
},
properties: {
'id': 0,
'stroke': 'white',
'stroke-opacity': 1,
'stroke-width': 0,
'header': 'reset title',
'descript': 'reset Description',
'quicktext': 'reset quick',
'image': 'reset image',
'link': 'reset link',
'zlat': 41.766431,
'zlng': -72.700585,
'zzoom': 11
}
}, {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[-72.676081, 41.766431],
[-72.700585, 41.772385]
]
},
properties: {
'id': 1,
'stroke': '#e74c3c',
'stroke-opacity': 0.5,
'stroke-width': 4,
'header': 'red title',
'descript': 'red Description',
'quicktext': 'red quick',
'image': '<img src="http://selectbylocation.com/i84/img/train.jpg"',
'link': 'red link',
'zlat': 41.772385,
'zlng': -72.700585,
'zzoom': 14
}
}, {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[-72.653900, 41.763387],
[-72.636562, 41.772385]
]
},
properties: {
'id': 2,
'stroke': '#3498db',
'stroke-opacity': 0.5,
'stroke-width': 4,
'header': 'blue title',
'descript': 'blue Description',
'quicktext': 'blue quick',
'image': '<img src="http://selectbylocation.com/i84/img/fasttrack.jpg"',
'link': 'blue link',
'zlat': 41.763387,
'zlng': -72.653900,
'zzoom': 14
}
}, {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[-72.792525, 41.773561],
[-72.692962, 41.809270],
[-72.621894, 41.810165]
]
},
properties: {
'id': 3,
'stroke': 'green',
'stroke-opacity': 0.5,
'stroke-width': 4,
'header': 'green title',
'descript': 'green Description',
'quicktext': 'green quick',
'image': 'green image',
'link': 'green link',
'zlat': 41.809270,
'zlng': -72.692962,
'zzoom': 12
}
}];
infoTop.innerHTML = '<div>' + 'text' + '</div>';
info.innerHTML = '<div>' + 'text' + '<br>' + '</div>';
infoImg.innerHTML = '<div>' + 'text' + '<br>' + '</div>';
// Create a feature layer that will hold the GeoJSON above.
var features = L.mapbox.featureLayer().addTo(map);
features.setGeoJSON(geojson);
features.on('mouseover', function (e) {
focusline(e.layer.feature.properties.id);
});
reset.onclick = function () {
resetall(0);
// commented out just for clarity
//updateheader(0);
}
var selectedLine = null;
trigger.onclick = function () {
clickline(1, true);
// commented out just for clarity
//updateheader(1);
}
trigger.onmouseover = function () {
clickline(1);
}
trigger.onmouseout = function () {
showline(1);
}
trigger2.onclick = function () {
clickline(2, true);
// commented out just for clarity
//updateheader(2);
}
trigger2.onmouseover = function () {
clickline(2);
}
trigger2.onmouseout = function () {
showline(2);
}
trigger3.onclick = function () {
clickline(3, true);
// commented out just for clarity
//updateheader(3);
}
trigger3.onmouseover = function () {
clickline(3);
}
trigger3.onmouseout = function () {
showline(3);
}
function resetall(focus) {
selectedLine = null;
features.eachLayer(function (l) {
var props = l.feature.properties;
props['stroke-opacity'] = 0.5;
});
features.setGeoJSON(geojson);
};
function clickline(focus, actuallyClicked) {
if (actuallyClicked) {
selectedLine = focus;
}
// Iterate through each feature in the
// features object and alter the properties.
features.eachLayer(function (l) {
var props = l.feature.properties;
props['stroke-opacity'] = (props.id !== focus) ? 0 : 1;
});
// Rerun the geojson
features.setGeoJSON(geojson);
};
function showline(focus) {
if (selectedLine) {
// Iterate through each feature in the
// features object and alter the properties.
features.eachLayer(function (l) {
var props = l.feature.properties;
props['stroke-opacity'] = (props.id === selectedLine) ? 1 : 0;
});
} else {
features.eachLayer(function (l) {
l.feature.properties['stroke-opacity'] = 0.5;
});
}
// Rerun the geojson
features.setGeoJSON(geojson);
};
function updateheader(focus) {
// Iterate through each feature in the ,
// features object and alter the properties.
features.eachLayer(function (l) {
var props = l.feature.properties;
if (props.id === focus) {
props['stroke-opacity'] = (props.id === focus) ? 1 : 1;
map.setView([props['zlat'], props['zlng']], props['zzoom']);
infoTop.innerHTML = '<div>' + props['header'] + '</div>';
info.innerHTML = '<div>' + props['descript'] + '<br>' + '</div>';
infoImg.innerHTML = '<div>' + props['image'] + '<br>' + '</div>';
} else {
props['stroke-opacity'] = (props.id !== focus) ? 0.0 : 1;
}
});
// Rerun the geojson
features.setGeoJSON(geojson);
};