onclick - 单击更改(和更改回)传单图标

标签 onclick icons leaflet

我已经让图标在点击时更改,但我需要在点击新图标时将其更改回原始图标(而不是保持新图标)。

例如,假设我的所有图标都是蓝色的。当我点击一个图标时,我希望它变成一个红色的图标。然后,当我点击一个新图标时,我希望之前点击的图标变回蓝色。

我可以让它与 mouseover 和 mouseout 一起工作,但我真的需要它来与 click 一起工作。我想我需要记录一个新的点击功能,但我不确定如何。

这是我目前拥有的:

function clickFeature(e) {
        var layer = e.target;
        e.target.setIcon(stop);

        info.update(layer.feature.properties);
    }


    var geojson;

    /*function resetHighlight(e) {
        geojson.resetStyle(e.target);
        e.target.setIcon(arms);
        info.update();
    }*/

    function onEachFeature(feature, layer) {
        layer.on({
            click: clickFeature
        });
    }
    geojson = L.geoJson(crossingData, {

        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: arms});
        },
        onEachFeature: onEachFeature

    }).addTo(map);

最佳答案

您可以尝试在函数之外定义单独的变量,该变量将保存当前单击的标记。

var clickedMarker;

function clickFeature(e) {
    if(clickedMarker) {
          clickedMarker.setIcon(arms);
    }
    var layer = e.target;
    e.target.setIcon(stop);
    clickedMarker = e.target;

    info.update(layer.feature.properties);
}

关于onclick - 单击更改(和更改回)传单图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17997247/

相关文章:

javascript - 如何将 onclick 事件添加到 reactjs 中 dangerouslysetInnerHtml 呈现的字符串?

javascript - onClick 函数在另一个函数中

javascript - meteor 按钮上的切换图标

Android 图标与 Logo

用于导入类型定义而不是主模块的 TypeScript 字符串

javascript - 将模块中的函数绑定(bind)到 onclick 事件

JQuery onclick 目标(此 li 跨度)

html - 社交媒体图标靠得太近

leaflet - 在 Leaflet 上将点转换为 LatLng

leaflet - 如何将传单缩放控件定位在所需位置