javascript - 使用一次单击命令，然后将其禁用

Question

这就是我想要做的。我在提示 0 上有两个按钮，是或否。如果单击"is"，框将向左移动，同时淡出并显示“提示 1”。如果单击“否”，框将向右移动，出现提示 2。我正在使用 Z-index 来告诉它哪个提示应该在最上面。现在，当我单击"is"时，它会转到提示 1，如果我单击"is"或“否”按钮所在的区域，则什么也不会发生。这里一切都很好。

当我单击“否”时，它会淡出(不会向左移动，但这不是我的主要关注点)并转到提示 2。但是当我单击"is"时(无法看到是)，其中"is"是，它会转到提示 1。我已经尝试在两个脚本上取消绑定(bind)点击，但它不起作用。我做错了什么？

谢谢

$(document).ready(function () {
    $('.appIMG1').one('click.appIMG1',function () {
        $(this).unbind('click');
        $("#app1").animate({
            left: '250px',
            opacity:0
        });
        $("#app2").fadeIn('slow');
    });
});


$(document).ready(function () {
    $(".appIMG2").one('click.appIMG2', function() {
        $(this).unbind('click');
        $("#app1").animate({
            right: '250px',
            opacity:0
        });
        $("#app3").fadeIn("slow");
    });
});

提示0的Z索引为10，提示1为9，提示2为8。

Answer 1

您需要解除所有点击事件的绑定(bind)，而不仅仅是被点击的元素。不要使用 $(this).unbind('click')，您需要将它与所有可点击元素解除绑定(bind)，就像这样(这是一个仅使用第二个按钮的示例，但它需要两者都要完成):

$(".appIMG2").one('click.appIMG2', function() {
    $('.appIMG1, .appIMG2').unbind('click');
    $("#app1").animate({
        right: '250px',
        opacity:0
    });
    $("#app3").fadeIn("slow");
    });
});