Question

我正在尝试为我们的大学制作一张基于Leaflet的地图。我们已完成所有工作，但我遇到了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事件）。

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

我无法找到实现这一目标的方法。它仅适用于单击的项目，而不适用于其他项目。是否对此代码进行了修改？

谢谢！

Answer 1

尝试以下方法：

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;
    });
});

Answer 2

未经测试，但我会在css中定义我的开启和关闭状态，然后在点击时更改类名。

<style> 
.onImage
{

height: 20px;
background-repeat: repeat-x;
background-image: url("images/item1_on.png") 
     /* path relative to where the css is if not in page. */
}
 .offImage
{

height: 20px; /* set the match the size of the icon */
background-repeat: no repeat;
background-image: url("images/item1_off.png") 
     /* path relative to where the css is if not in page. */
}
</style>
<script>
    $(document).ready(function (){
    $(".switch").on('click', function(evtObj) {
        $(".onImage").removeClass("onImage").addClass("offImage");
        $(evtObj.target).removeClass("offImage").addClass("onImage");

      });
   });
</script>
<div class='switch offIcon'></div>
<div class='switch offIcon'></div>

单击另一个对象

2 个答案: