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
    }
});

jQuery如果hasclass然后函数

4 个答案: