我的切換類出了點問題

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”之間進行切換。 這並不意味着您自動獲得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

我修好了它！

不是最漂亮的代碼。 但這行得通，我需要再給Setani上一堂課，而不是為掩飾課。 所以我必須這樣做：

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

感謝您的所有幫助！ =）