一次只允許一個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');