我正在尝试为我们的大学制作一张基于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恢复为正常,并取消突出显示一个突出显示的建筑物。
我无法找到实现这一目标的方法。它仅适用于单击的项目,而不适用于其他项目。是否对此代码进行了修改?
谢谢!
答案 0 :(得分: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;
});
});
答案 1 :(得分:0)
未经测试,但我会在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>