onmouseover，onmouseout和onclick邏輯以顯示/隱藏

Question

我在網頁上有許多與放大器交互的按鈕。 我希望每一個都基於鼠標事件執行三個JavaScript函數之一。

我遇到的問題是，當我單擊按鈕時，其他行消失了，但是當我將所有行都移出鼠標時，它們又再次顯示了。 我需要的是：

onmouseover =懸停時，隱藏不對應的元素，將焦點保持可見。 （出於各種原因，使用不透明度=0。）

onclick =永久隱藏不對應的元素，直到單擊另一個按鈕。

onmouseout =如果未單擊，則顯示所有元素，但如果單擊，則僅顯示焦點元素，直到單擊另一個按鈕。

您可以在此處查看功能。 他們都工作，只是不確定如何獲得我需要的工作。

function resetall(focus) {
  features.eachLayer(function(l) {
    var props = l.feature.properties;
    props['stroke-opacity'] =  1;
  });
  features.setGeoJSON(geojson);
};

function clickline(focus) {
  features.eachLayer(function(l) {
    var props = l.feature.properties;
    props['stroke-opacity'] = (props.id !== focus) ? 0.5 : 1;
  });
  features.setGeoJSON(geojson);
};

function showline(focus) {
  features.eachLayer(function(l) {
    var props = l.feature.properties;
    props['stroke-opacity'] = (props.id === focus) ? 1 : 1;
  });
  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;
      }
  });
  features.setGeoJSON(geojson);
};

JSfiddle-演示在這里

希望這是有道理的。 謝謝。

埃里克

Answer 1

與http://stackoverflow.com/questions/2575420/jquery-binding-event-on-selected-class類似的問題

為HTML對象使用唯一的類名，並使用jquery將事件綁定到具有該類名的所有對象的函數。

Answer 2

我不得不對您的代碼進行一些重構，以使其工作並變得更加清晰。 它不完全符合您在請求中描述的內容，但是我想說您應該重新考慮您的期望，因為例如，當您不單擊任何觸發器時，只需將鼠標懸停一遍，您應該以與以前相同的狀態結束徘徊，但在您的描述中卻並非如此。

其他說明：

1. 首先，您不能對onmouseover和click事件使用相同的函數（除非您將不同的參數傳遞給它們），因為您希望這些事件發生不同的事情。
2. 從您的描述看來，您需要3個不透明度值才能使線條不可見，半可見和可見。 我還假設默認情況下所有行都是不可見的。
3. 我也修復了您的重置按鈕。
4. 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);
};