使用 fadeIn 和 fadeOut 映射信息

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 映射信息

Map Informations with fadeIn and fadeOut

javascript

jquery

fade

fadeout

fadein