jquery - 一个事件的一部分运行一次，另一部分运行几次

Question

$(".a").on("click",function(){
        $("b").stop(true, true).slideUp(500);
        $(this).next("c").stop(true, true).slideDown(500);
    });

我希望当用户单击“a”时，此行（第 1 行）只运行一次：

$("b").stop(true, true).slideUp(500);

但是这条线（第2行）无限运行：

$(this).next("c").stop(true, true).slideDown(500);

这意味着，当用户再次单击“a”时，第 1 行不运行，但第 2 行运行。如何？我试试这个但不工作：

$(".a").on("click",function(event){
            $("b").stop(true, true).slideUp(500);
            $(this).next("c").stop(true, true).slideDown(500);
            $(this).off( event );
        });

Answer 1

我建议使用one()以获得更清晰的代码并更好地传达含义。

$(".a")
   .one("click", function () { alert("Only once!"); })
   .click(function () { alert("Always!"); });

Answer 2

您可以data在用户单击按钮时设置标志：

$(".a").on("click",function(){
    if (!$(this).data('clicked')) {
        $("b").stop(true, true).slideUp(500);
        $(this).data('clicked', true);
    }
    $(this).next("c").stop(true, true).slideDown(500);
});

Answer 3

您可以使用一个类来标记执行

$(".a").on("click",function(){
        if(!$(this).hasClass('clickedOnce')){
           $("b").stop(true, true).slideUp(500);
           $(this).addClass('clickedOnce');
        }
        $(this).next("c").stop(true, true).slideDown(500);
    });