一次只允許執行一個jQuery函數

Question

我有一個網格佈局，我正在使用jQuery來更改每個網格中顯示的內容，具體取決於單擊了哪個網格。目前，我可以點擊一個網格，它會發生變化，然後如果我單擊相同的網格，它會回到默認值，但在初始點擊之後如果它們碰巧在另一個網格中單擊，它將觸發另一個函數。我無法隱藏div，因爲我正在使用它們來顯示內容。我只想讓一次觸發一個函數。以下是我的代碼。

(function() { 
    var count = 0; 

    jQuery('#home-grid-one-two').click(function() { 
     count += 1; 
     jQuery('#home-grid-two-one').css({ 
      'visibility': 'hidden' 
     }); 
     jQuery('#home-grid-two-two').css({ 
      'visibility': 'hidden' 
     }); 
     jQuery('#home-grid-two-three').hide(); 
     jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")'); 
     jQuery('#home-grid-three-two').css({ 
      'background-size': 'cover' 
     }); 
     jQuery('#home-grid-three-three').hide(); 
     jQuery('#home-grid-two-two').css({ 
      'margin-top': '-450px' 
     }); 
     jQuery('#home-grid-three-two').css({ 
      'margin-top': '-420px' 
     }); 
     jQuery(".leftpara").show(); 
     jQuery(".rightpara").show(); 
     jQuery(".ptagexp").hide(); 


     if (count == 2) { 
      jQuery('#home-grid-two-one').css({ 
       'visibility': 'visible' 
      }); 
      jQuery('#home-grid-two-two').css({ 
       'visibility': 'visible' 
      }); 
      jQuery('#home-grid-three-two').show(); 
      jQuery('#home-grid-three-two').css('background-image', 'none'); 
      jQuery('#home-grid-two-two').css({ 
       'margin-top': '0px' 
      }); 
      jQuery('#home-grid-three-two').css({ 
       'margin-top': '0px' 
      }); 
      jQuery('#home-grid-two-one').show(); 
      jQuery('#home-grid-three-one').show(); 
      jQuery('#home-grid-two-three').show(); 
      jQuery('#home-grid-three-three').show(); 
      jQuery(".leftpara").hide(); 
      jQuery(".rightpara").hide(); 
      jQuery(".ptagexp").show(); 
      count = 0; 
     } 
    }); 
})(); 

(function() { 
    var count = 0; 
    jQuery('#home-grid-three-two').click(function() { 
     count += 1; 
     jQuery('#home-grid-one-one').css('background-image',  'url("A PICTURE")'); 
     jQuery('#home-grid-one-one').css({ 
      'background-size': 'contain', 
      'background-repeat': 'no-repeat', 
      'background-position': '50%' 
     }); 


     jQuery('#home-grid-one-two').css('background-image',  'url("A PICTURE")'); 
     jQuery('#home-grid-one-two').css({ 
      'background-color': 'transparent', 
      'background-size': 'contain', 
      'background-repeat': 'no-repeat', 
      'background-position': '50%' 
     }); 


     if (count == 2) { 
      jQuery('.home-grid').css('background-image',  'none'); 
      jQuery('#home-grid-one-two').css('background-color',  '#cccccc'); 
      jQuery('#home-grid-two-one').css('background-color',  '#cccccc'); 
      jQuery('#home-grid-two-three').css('background-color', '#cccccc'); 
      jQuery('#home-grid-three-two').css('background-color', '#cccccc'); 
      jQuery('#home-grid-one-two').find('p').show(); 
      jQuery('#home-grid-two-one').find('p').show(); 
      jQuery('#home-grid-two-two').find('p').show(); 
      jQuery('#home-grid-two-three').find('p').show(); 
      jQuery('#home-grid-three-two').find('p').show(); 
      count = 0; 
     } 
    }); 
})(); 

Answer 1

簡單的解決辦法或許是聲明一個全局變量保持標籤當一個函數運行時，運行等功能之前檢查它。

Answer 2

通過添加和刪除幾個類，使它們不可點擊（應在大多數瀏覽器中工作，但我沒有測試過所有）。 （節省綁定/解除綁定可能會導致混亂）

樣品撥弄玩：http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/

HTML示例：

<div class="mygrids active">one</div> 
<div class="mygrids">two</div> 
<div class="mygrids">three</div> 
<div class="mygrids">four</div> 
<div class="mygrids">five</div> 
<div id='showactive'>active:<span>none</span></div> 

樣品CSS

.mygrids.inactive { pointer-events: none; } 
.mygrids.active { pointer-events: auto; 
border: solid lime 1px;} 

示例代碼

$('.mygrids').on('click',function(){ 
    $('#showactive>span').text($(this).text()); 
    if ($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
     $(this).siblings().removeClass('inactive'); 
    } 
    else{ 
     $(this).addClass('active'); 
     $(this).siblings().addClass('inactive'); 
    } 
}); 
$('.mygrids').not('.active').addClass('inactive');