Question

我的jQuery脚本有问题。它有点工作，但是当我尝试在它首先工作的类之间切换时。脚本就像它应该的那样改变类。但是当我再次尝试时，我必须单击链接然后在其他地方，然后它再次工作。我希望能够反复重复整个过程，而不必再点击两次。

var clickOnSettings = true;
$(".settings_link").click(function () {
    event.preventDefault();
    if (clickOnSettings) {
        $("#coverup").toggleClass("cover1");
        $("#settingani").toggleClass("settings1");
        clickOnSettings = false;
    }
});
$("#coverup").click(function () {
    if (!clickOnSettings) {
        $("#coverup").toggleClass("cover2");
        $("#settingani").toggleClass("settings2");
        clickOnSettings = true;
    }
});

创建了一个jsfiddle：

http://jsfiddle.net/5dzt1v6f/13/

Answer 1

如果您切换＆＃39; cover1＆＃39;，您基本上在拥有和不拥有＆＃39; cover1＆＃39;之间切换。在元素上。这并不意味着您在删除cover2时自动获得cover1。

你必须自己做。幸运的是，toggleClass有第二个接受布尔值的参数。这使您可以根据方便引入的布尔值轻松地打开或关闭类。

此外，这使得两个元素的单击处理程序相同：

var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() { 
    event.preventDefault();
    clickOnSettings = ! clickOnSettings;
    //Toggle all classes.
    $( "#coverup" ).toggleClass( "cover1", clickOnSettings);
    $( "#settingani" ).toggleClass( "settings1", clickOnSettings);
    $( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
    $( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});

http://jsfiddle.net/5dzt1v6f/20/

Answer 2

为什么不用addClass和removeClass来做你想做的事情。

var clickOnSettings = true;

            $( ".settings_link" ).click(function() { 
                event.preventDefault();
                if (clickOnSettings) {
                    $( "#coverup" ).addClass( "cover1" );
                    $( "#settingani" ).addClass( "settings1" );
                    $( "#coverup" ).removeClass( "cover2" );
                    $( "#settingani" ).removeClass( "settings2" );
                    clickOnSettings = false;
                }
            });
            $( "#coverup" ).click(function() { 
                if (!clickOnSettings) {
                    $( "#coverup" ).addClass( "cover2" );
                    $( "#settingani" ).addClass( "settings2" );
                    $( "#coverup" ).removeClass( "cover1" );
                    $( "#settingani" ).removeClass( "settings1" );
                    clickOnSettings = true;
                }
            });

http://jsfiddle.net/5dzt1v6f/15/

Answer 3

我修好了！

不是最漂亮的代码。但这工作我需要另外一个课程，而不是掩饰。所以我必须这样做：

        var clickOnSettings = 1;

        $( ".settings_link" ).click(function() { 
            event.preventDefault();
            if (clickOnSettings == 1) {
                $( "#settingani" ).removeClass( "settings0" );
                $( "#coverup" ).addClass( "cover1" );
                $( "#settingani" ).addClass( "settings1" );
                clickOnSettings = 3;
            }
        });
        $( ".settings_link" ).click(function() { 
            event.preventDefault();
            if (clickOnSettings == 2) {
                $( "#coverup" ).removeClass( "cover2" );
                $( "#settingani" ).removeClass( "settings2" );
                $( "#coverup" ).addClass( "cover1" );
                $( "#settingani" ).addClass( "settings1" );
                clickOnSettings = 3;
            }
        });
        $( "#coverup" ).click(function() { 
            if (clickOnSettings == 3) {
                $( "#coverup" ).removeClass( "cover1" );
                $( "#settingani" ).removeClass( "settings1" );
                $( "#coverup" ).addClass( "cover2" );
                $( "#settingani" ).addClass( "settings2" );
                clickOnSettings = 2;
            }
        });

感谢您的帮助！ =）

我的toggleclass有问题

3 个答案: