javascript - 我的 toggleclass 有问题

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

如果您切换“cover1”，您基本上是在元素上有和没有“cover1”之间切换。这并不意味着您在删除 cover1 时会自动获得 cover2。

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

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

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/