0

我有以下 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元素时，我都想：

  1. 将类添加.selected到该.setting-tab元素（并将其从其他元素中删除）
  2. 将其子元素-off上的“”部分替换为“ ”（并将所有其他部分翻转为“ ”）.icon-on-off

我可以成功地做到#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>

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

有什么想法我哪里出错了吗？

4

1 回答 1

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");
于 2012-11-07T15:51:16.357 回答