使用单击命令一次，然后禁用它

Question

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

当我单击“否”时，它会淡出（不会向左走，但这不是我主要关心的问题）并转到提示 2。但是当我单击“区域”时（“是”看不到），“是”是，它会提示 1。我已经尝试在两个脚本上取消绑定点击，但它不起作用。我做错了什么？

谢谢

$(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

您需要解除对所有内容的点击事件的绑定，而不仅仅是被点击的项目。无需使用$(this).unbind('click')，您需要将其与所有可点击元素解除绑定，如下所示（这是仅使用第二个按钮的示例，但两者都需要这样做）：

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