jquery - 禁用和启用 div 事件处理程序单击 jQuery？

Question

var times = 0;
jQuery(window).load(function(){
   $(".banana").click(function(){
     console.log(times);
     times++;
     if(times == 3){
        $("#b1").unbind('click');
     }
    if(times == 6){
        $("#b1").bind('click');
    }
   });
});

和 HTML 代码：
img id="b1" src=".../" class="banana"
img src=".../" alt="" class="banana"

我有前面的例子，当我尝试启用 div 事件处理程序click时。但它不起作用。我读了一些类似的主题，它不能解决问题。请帮帮我？

Answer 1

您想要的是防止可怕的点击事件堆叠。有不同的处理方式，但基本上它们都归结为设置布尔值。

在您的示例中，我为您的 #choices 容器设置了一个 data() 标记，并以 value 开头false。单击后，我将布尔值更改为true. 基本上，如果processing=false我在点击回调中执行代码。

    $("#choices").data('processing', false);

    $("#rock").click(function () {
        if (!$(this).parent().data('processing')) {
            $(this).parent().data('processing', true);
            user = roPaSc[0];
            gamePlay();
        }

    });
    $("#paper").click(function () {
        if (!$(this).parent().data('processing')) {
            $(this).parent().data('processing', true);
            user = roPaSc[1];
            gamePlay();
        }
    });
    $("#scissors").click(function () {
        if (!$(this).parent().data('processing')) {
            $(this).parent().data('processing', true);
            user = roPaSc[2];
            gamePlay();
        }
    });

动画结束后，需要重置布尔值。我在“else-statement”中的 openEyes 函数中执行此操作。

   else {
            $("#you").attr({
                'src': user
            });
            $("#computer").attr({
                'src': com
            });
            $("#choices").data('processing', false);
        }

这是“石头剪刀布”的调整小提琴：http: //jsfiddle.net/gpxxn/2/

Answer 2

您忘记了类的点（选择器应该是$('.banana').

var times = 0;
jQuery(window).load(function(){
   $(".banana").click(function(){
     console.log(times);
     times++;
     if(times == 3){
        $("#b1").unbind('click');
     }
    if(times == 6){
        $("#b1").bind('click');
    }
   });
});

Answer 3

这不是您问题的答案，而是对您的代码的一些建议。

使用“文档就绪”而不是加载。

$(window).load(function(){...

用。。。来代替

$(document).ready)function(){...

它们都对你有用，但有细微的差别。“ready”将在页面结构加载后立即将您的事件绑定到您的元素，但仍在加载内容之前。

$(window).load() 将等待所有内容被加载。这包括图像。