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');

一次只允许一个jQuery函数执行

2 个答案: