jquery - jQuery if hasclass then 函数

Question

这是一个动画，仅当 div rip_tab 具有类 'rip_tab_ripped' 时才会触发，该类在单击 div 后应用。然而，动画甚至在 rip_tab_ripped 类被切换之前就被触发了。每个函数在没有 if 子句的情况下单独工作。任何帮助，将不胜感激 -

var sauceSquirt = {
    init: function() {

        $("#rip_tab").click(function() {
            $(this).toggleClass("rip_tab_ripped");
        });



        function fireA() {
            $("#sauceRed").switchClass("sauce_hide", "sauceRedGo", 500)
        }

        function fireB() {
            $("#sauceBlue").switchClass("sauce_hide", "sauceBlueGo", 500)
        }

        if ($('#rip_tab').hasClass("rip_tab_ripped")) {


            $('#packet').click(function() {

                var events = [fireA, fireB];

                //declare counter
                if (!this.counter) {
                    this.counter = 0;
                }

                events[this.counter]();
                this.counter = (this.counter + 1) % 3;
            });



        }

    }

}

$(document).ready(function() {
    sauceSquirt.init();

});​

Answer 1

看起来你在这部分有问题：

if ($('#rip_tab').hasClass("rip_tab_ripped")) {
    $('#packet').click(function() {

       var events = [fireA, fireB];

       //declare counter
       if(!this.counter) { this.counter = 0; }

       events[this.counter]();
       this.counter = (this.counter + 1) % 3;
    });
}

您可以将其更改为：

$('#packet').click(function() {
    if ($('#rip_tab').hasClass("rip_tab_ripped")) {

           var events = [fireA, fireB];

           //declare counter
           if(!this.counter) { this.counter = 0; }

           events[this.counter]();
           this.counter = (this.counter + 1) % 3;
    }
    return false;
});

你也可以看看jQuery Promise

Answer 2

解决方法是将 if ($ 语句移动到 click 语句下面的行。

Answer 3

#packet 是什么？在我看来，有这个语句应该是这样写的：

this.counter = this.counter % 2;

Answer 4

请记住，在初始化时会调用此方法中的所有内容，而您希望延迟类检查直到#packet单击 ：

$('#packet').click(function() {
    if ( $('#rip_tab').is('.rip_tab_ripped') ) {
        var events = [fireA, fireB];

        //declare counter
        this.counter = this.counter || 0; // set to 0 if value is null

        events[this.counter]();
        this.counter = ++this.counter % 2; // You only have two methods
    }
});