地圖信息fadeIn和fadeOut

Question

我有一個地圖，有一些pinpoint，如果你點擊他們顯示一些信息。該計劃是，我可以點擊一個圖標，它顯示一個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> 

編輯：

感謝我最大有事startet但有一些邏輯錯誤，我一定做。

$(".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

您將2個事件處理程序附加到相同的DOM元素上。 所以，如果你點擊它，這兩個處理程序將觸發事件，這兩個函數將被調用。

可能使用類似

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

如果觸發第一次事件，檢查你有

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

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

這樣再次按下你可以肯定的，那你只能觸發事件處理程序的有用部分。