javascript - 单击另一个对象时切换jQuery控件

我正在尝试为我们的大学整理一张基于传单的地图。我们几乎完成了所有工作，但是我遇到了jQuery控件的问题。我们使用此代码块突出显示jQuery按钮并将命令发送到Leaflet。

<script type="text/javascript">
jQuery(function(){
         $(".img-swap").on('click', function() {
            if ($(this).attr("class") == "img-swap") {
            this.src = this.src.replace("_off","_on");
            } else {
            this.src = this.src.replace("_on","_off");
            }
            $(this).toggleClass("on");
        });
});
</script>
<style type="text/css">
.img-swap {cursor: pointer;}
</style>


<p align="center"><img src="images/item1_off.png" class="img-swap" width="94" height="93" alt="Locate Item 1" /></p>
<p align="center"><img src="images/item2_off.png" class="img-swap" width="106" height="76" alt="Locate Item 2" /></p>

当您单击对象时，此代码可以正常工作。我们遇到的问题是，当单击一个新对象时，我们需要触发一个事件以取消选择一个对象（并撤消相应的Leaflet事件）。

例如，如果我们有五个项目，而您单击第一个项目，它将变成红色，并且地图突出显示一些建筑物。单击第二项时，它应变为红色，将第一项恢复为正常状态，并取消突出显示突出显示的建筑物。

我找不到办法实现这一目标。它仅适用于被单击的项目，不适用于其他项目。对此代码有修改吗？

谢谢！

最佳答案

请尝试以下操作：

jQuery(function(){
    var selected = null;

    $(".img-swap").on('click', function() {
        if (selected) {
            selected.src.replace("_on","_off");
            $(selected).removeClass("on");
        }
        this.src.replace("_off","_on");
        $(this).addClass("on");
        selected = this;
    });
});