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 つをクリックするたびに、次のことを行います。

  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 に答える