Question

我有一个带有一些精确定位的地图，如果点击它们会显示一些信息。计划是，我可以单击一个图标并显示一个div，如果我现在点击相同的图标，div将会消失。

只要我得到show（）就可以了，但如果我放入fadeIn（），它会在第二次点击时重新显示。

到目前为止我的脚本

<script type="text/javascript">
    jQuery(document).ready(function() {
        $(".icon-location").on('click', function(event){
          $('[id^="ort-box-"]').fadeOut('slow');
        });


        var mouseX;
        var mouseY;
        $(document).ready(function(e) {
           mouseX = e.pageX;
           mouseY = e.pageY;
        });

        $(".icon-location").on('click', function(event){
            var currentId = $(this).attr('id');
            $("#ort-box-"+currentId).show().css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
        });
    });
</script>

编辑：

感谢Max，我得到了一些启发，但我必须犯下一些逻辑错误。

$(".icon-location").on('click', function(event){
            $('[id^="ort-box-"]').fadeOut('slow');

        if(!$(this).hasClass('ortActive')){

                    var currentId = $(this).attr('id');
                    $("#ort-box-"+currentId).fadeIn('slow').css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});        

            $(this).addClass('ortActive');
        }else {
            $(this).removeClass('ortActive');
        }
    });

Answer 1

您在同一个DOM元素上附加了2个事件处理程序。因此，如果单击它，两个处理程序将触发事件，并且将调用这两个函数。

也许使用像

这样的东西

$(this).addClass('active');

如果您是第一次触发事件，请检查何时再次按

if($(this).hasClass('active')){ ... 

  $(this).removeClass('active');
}

这样您可以确定，您只能触发事件处理程序的所需部分。

使用fadeIn和fadeOut映射信息

1 个答案: