Question

我有以下HTML结构：

<div id="settings-choose">
    <a href="#setting1" class="setting-tab">
        <div class="content">
            <div class="icon setting1-off"></div>
            <div class="label">Setting 1</div>
        </div>
    </a>
    <a href="#setting2" class="setting-tab">
        <div class="content">
            <div class="icon setting2-off"></div>
            <div class="label">Setting 2</div>
        </div>
    </a>
    <!-- more .setting-tab elements -->
</div>

每当我点击其中一个.setting-tab元素时，我想：

将班级.selected添加到该.setting-tab元素（并将其从其他元素中移除）

将其子-off元素上的“.icon”部分替换为“-on”（并将所有其他元素翻转为“-off”）< / LI>

我可以成功做到＃1，但不能做＃2。这就是我所拥有的：

$("#settings-choose .setting-tab").click(function(){
    $("#settings-choose .setting-tab").removeClass("selected");
    $(this).addClass("selected");

    $("#settings-choose .setting-tab").each(function(){
        var icon = $(this).find(".icon"),
            state = icon.attr("class");

        if (!($(this).hasClass("selected"))){
            state.replace("-on", "-off");
        } else {
            state.replace("-off", "-on");
        }
    });
});

这正确地将.selected类添加到单击的.setting-tab元素中，并将其从其他元素中删除...

<a href="#setting1" class="setting-tab selected">...</a>
<a href="#setting2" class="setting-tab">...</a>

但.icon元素的类不会改变......

<a href="#setting1" class="setting-tab selected">
    <div class="content">
        <div class="icon setting1-off"></div>
        <div class="label">Setting 1</div>
    </div>
</a>

我在控制台中没有出现任何错误，只是......它没有改变。

我出错的任何想法？

Answer 1

快速回答是您忘记了类的赋值，只是替换了变量中的文本。

    if (!($(this).hasClass("selected"))){
            icon.attr("class", state.replace("-on", "-off"));
        } else {
            icon.attr("class", state.replace("-off", "-on"));
        }

但您可以进行其他更改，例如

$("#settings-choose .setting-tab").removeClass("selected");

代替

$("#settings-choose .selected").removeClass("selected");

jQuery：当父类改变时，改变子类名的一部分

1 个答案: