Question

当我使用课程a按.home时，javascript会移除课程.home。当我再次点击a而没有上课.home时，javascript仍会运行。为什么呢？

$(".home").click(function(){
    $(".overlay2").fadeIn("medium");
    $(".background").cycle("pause");
    setTimeout(function(){
        $(".overlay2").fadeOut(500);
        $(".overlay").fadeOut(500);
        setTimeout(function(){
            $(".background").slideUp(800);
            setTimeout(function(){
                $(".navigation").animate({"top":"20px","left":"20px","margin-top":"0px","margin-left":"0px"},500);
            }, 800);
        }, 500);

    }, 500);
    $(".home").removeClass("home");
});

Answer 1

尝试使用以下内容：

$( "a" ).removeClass( "home" );

从所有class

中删除a个主页

要从您点击过的class中删除a个主页：

$( this ).removeClass( "home" );

Answer 2

您已删除该类，但Click事件处理程序仍将附加到元素。您需要使用on()和off()来添加和删除处理程序：

;(function() {

    function homeClick() {
        $(".overlay2").fadeIn("medium");
        $(".background").cycle("pause");
        setTimeout(function(){
            $(".overlay2").fadeOut(500);
            $(".overlay").fadeOut(500);
            setTimeout(function(){
                $(".background").slideUp(800);
                setTimeout(function(){
                    $(".navigation").animate({"top":"20px","left":"20px","margin-top":"0px","margin-left":"0px"},500);
                }, 800);
            }, 500);

        }, 500);

        // remove just the click event for this element ...
        $(this).off('click', homeClick);
        // ... or all .home elements
        $('.home').off('click', homeClick);
    }

    $(".home").on('click', homeClick);

})();

或者您可以使用one()，因此事件只会触发一次：

$(".home").one('click', function(){
    $(".overlay2").fadeIn("medium");
    $(".background").cycle("pause");
    setTimeout(function(){
        $(".overlay2").fadeOut(500);
        $(".overlay").fadeOut(500);
        setTimeout(function(){
            $(".background").slideUp(800);
            setTimeout(function(){
                $(".navigation").animate({"top":"20px","left":"20px","margin-top":"0px","margin-left":"0px"},500);
            }, 800);
        }, 500);

    }, 500);
    $(this).removeClass("home");
});

Answer 3

TL; DR

而不是removeClass，请执行以下操作：

$（ '家 '）。OFF（' 点击'）

事件处理程序（“click”之后的“function”部分）仍然附加到DOM元素（最初具有类.home的实际元素）

这是发生的事情： $（'。home'）创建一个匹配“.home”的所有元素的jQuery对象，创建一个事件监听器并将一个处理程序（该函数）附加到该监听器。只要您不替换或删除元素，所有事件侦听器仍在处理这些元素并运行这些函数。您无需删除该类，只需关闭（删除）事件侦听器即可。

Answer 4

您必须使用事件委派，因为您正在动态更改DOM：

$(document).on('click', '.test', function() {
  $(this).removeClass('test');
  alert('clicked');
});

.test {
  padding: 10px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="test">test</span>

如果您想要按时点击而不删除课程，可以使用one()，如下所示：

$(document).one('click', '.test', function() {  
     // this will get executed only once
});

jQuery onClick删除类并删除＆＃34; .click（）＆＃34;

4 个答案: