jquery - AddClass和RemoveClass恢复到原来的状态

Question

我一直在研究这个问题，并一直在谷歌上搜索解决方案。

背景我想删除“customBox禁用”类并添加“customBox”类。我尝试了几种方法； .removeClass("customBoxDisabled").addClass("customBox")、toggle(....,....) 以及下面的但无济于事。问题是代码确实更改为新类，但程序一结束它就恢复了。但为什么？有专家吗？

$(document).on("click", "#btnStep2", function() {

    alert($("#step2").children().children().children().children().eq(1).children().eq(1).attr("class"));
    if ($("#step2").children().children().children().children().eq(1).children().children().is(':disabled')) {
        alert("disabled");
        if ($("#step2").children().children().children().children().eq(1).children().eq(1).hasClass("customBox disabled")) {
            $("#step2").children().children().children().children().eq(1).children().eq(1).removeClass();
            alert($("#step2").children().children().children().children().eq(1).children().eq(1).attr("class"));
            $("#step2").children().children().children().children().eq(1).children().eq(1).addClass("customBox disabled");
            alert($("#step2").children().children().children().children().eq(1).children().eq(1).attr("class"));
            return false;
        }
    } else {
        alert("enabled");
        if ($("#step2").children().children().children().children().eq(1).children().eq(1).hasClass("customBox")) {
            $("#step2").children().children().children().children().eq(1).children().eq(1).removeClass();
            alert($("#step2").children().children().children().children().eq(1).children().eq(1).attr("class"));
            $("#step2").children().children().children().children().eq(1).children().eq(1).addClass("customBox");
            alert($("#step2").children().children().children().children().eq(1).children().eq(1).attr("class"));
            return false;
        }
    }
    return false;
});

Answer 1

首先，您需要替换所有这些 .children 方法。只需使用 find() 方法即可使代码更清晰、更易于阅读。

其次，我想向您澄清“disabled”和“customBox”是两个单独的类。通过查看问题的描述，您只想切换“禁用”类别。 “customBox”类不必执行任何操作。

毕竟，请尝试下面的代码。希望有帮助

$(document).on("click", "#btnStep2", function() {
    var custom_box = $("#step2").find(".customBox");
    if (custom_box.length > 0){
        custom_box.toggleClass("disabled");
    }
});

快乐编码:)