Leaflet.js：更改标记图标有效，但仅一次

Question

[嗨，我尝试创建带有不同颜色标记的传单地图。每个按钮上有3个带有onClick事件的按钮。当我单击其中一个时，它将“激活”类添加到我单击的那个中，并从其他2个中删除“激活”。

然后，我有3个功能，每个标记颜色一个，一个读取选择器Activate类的功能。

[A具有激活=蓝色标记并警告'蓝色'，B具有激活=绿色标记并警告'绿色'，C具有激活=黄色标记并警告'...黄色！

并且还加载了它来执行readSelector

而且这很好，但是只有一次。每次单击按钮时，警报都会起作用，警报效果良好，但是标记颜色只会更改一次：如果我以蓝色开头（通过阅读加载），那么我单击绿色，标记将变为绿色，然后我单击黄色，标记将变为黄色，但是如果我再次单击蓝色或绿色，则可以警报，但标记保持黄色。它保持3的最后颜色。

我不知道这是否可以理解。

HTML ::

<div id="mapWrap" class="container">
    <div class="row">
        <div class="col-1 m-0 p-0">
            <div class="mapTool">
                <ul class="list-group list-group-horizontal m-0 p-0 mb-3">
                    <li class="list-group-item flex-fill bg-success categorySelector selectorActivate" id="santeSelector" onclick="onClickSante()">Santé</li>
                    <li class="list-group-item flex-fill bg-primary categorySelector " id="educSelector" onclick="onClickEduc()">Education</li>
                    <li class="list-group-item flex-fill bg-warning categorySelector " id="loisirSelector" onclick="onClickLoisir()">Loisir</li>
                </ul>
            </div>
        </div>
        <div class="col-11 m-0 p-0">
            <div id="mapid">
            </div>
        </div>
    </div>
</div>
JAVASCRIPT ::

//// OnClick函数////

    var sante = $('#santeSelector');
    var educ = $('#educSelector');
    var loisir = $('#loisirSelector');

function onClickSante(){
    sante.addClass('selectorActivate');
    educ.removeClass('selectorActivate');
    loisir.removeClass('selectorActivate');
    };
sante.on('click',onClickSante);

function onClickEduc(){
    educ.addClass('selectorActivate');
    loisir.removeClass('selectorActivate');
    sante.removeClass('selectorActivate');
    };
educ.on('click',onClickEduc);

function onClickLoisir(){
    loisir.addClass('selectorActivate');
    sante.removeClass('selectorActivate');
    educ.removeClass('selectorActivate');
    };
loisir.on('click',onClickLoisir);
//// MAP PART /////

    init map code from Leaflet 
////标记功能/////

var markerColor = L.marker();

function greenIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(greenIcon)
        .addTo(mymap);
}
function blueIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(blueIcon)
        .addTo(mymap);
}
function yellowIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(yellowIcon)
        .addTo(mymap);
}
$('#santeSelector').on('click',readSelector);
$('#educSelector').on('click',readSelector);
$('#loisirSelector').on('click',readSelector);

window.onload = readSelector;

function readSelector(){

    if( $('#santeSelector').hasClass('selectorActivate') ){

        mymap.on('click', greenIconMark);
        alert('Santé is selected');

    }else if( $('#educSelector').hasClass('selectorActivate') ){

        mymap.on('click', blueIconMark);
        alert('Education is selected');

    }else if( $('#loisirSelector').hasClass('selectorActivate') ){

        mymap.on('click', yellowIconMark);
        alert('Loisir is selected');
    };
};
感谢您阅读我

[嗨，我尝试创建带有不同颜色标记的传单地图。每个按钮上有3个带有onClick事件的按钮。当我单击其中一个时，它将“激活”类添加到我单击的那个中...

Answer 1

这是因为您添加了多个on事件，最后一个事件最后执行。