0

スクリプトに問題があります。説明しようと思います。アイテムをクリックすると、スパンの属性を削除して別のクラスに置き換える必要があります。

リストの項目をクリックすると：

  • テーマ名 (ul li span ) を取得します。
  • クラス名の末尾に「-act」がない場合 ( defaultまたはdefault-act、選択状態にするために追加します。
  • その他の項目については、「-act」を削除して非選択状態にします。

結果として、テーマ Name + '-act' と '-act' を含まない iten を持つ必要があります。

これが私のコードです: http://jsfiddle.net/DQTKX/21/

HTML

<section id="createform">
    <ul>
      <li id="theme_1">
        <span class="default-act">Default</span>
        <h3>Default</h3>
      </li>
      <li id="theme_2">
        <span class="food">Food</span>
        <h3>Food</h3>
      </li>
      <li id="theme_3">
        <span class="supermarket">Supermarket</span>
        <h3>Supermarket</h3>
      </li>
      <li id="theme_4">
        <span class="travel">Travel</span>
        <h3>Travel</h3>
      </li>
    </ul>
</section>

jQuery

$('ul li').on('click', function(){
    var themeName = $(this).find('span').attr('class');  

    $(this)
        .removeClass(themeName)
        .addClass(themeName + '-act');

    $(this).not('active')
        .removeClass(themeName + '-act')
        .addClass(themeName);
});

注意 :デフォルトでは、最初の項目には default-act のスパンがあり、赤いアイコンが表示されます。別の項目をクリックすると、「-act」を削除して選択項目に追加する必要があります。

編集

だから、私はより良い理解のために更新しました。スーパーマーケットや旅行のアイコンについて心配する必要はありません。その上、私は上のクラスを削除しました

  • 、それは混乱でした。

    http://jsfiddle.net/DQTKX/21/

    • 4

    2 に答える 2

    1

    あなたはこのようにそれを行うことができます：

    $('ul li').on('click', function(){
    var className = $("span", this).attr("class");
    if(className.indexOf("-act")<=0){       
        $("#createform ul li span[class*='-act']").each(function(){this.className = this.className.replace("-act", "");})
        $("span", this).attr("class", className + "-act"    ); 
    }

});

    http://jsfiddle.net/DQTKX/22/

    しかし、私に関しては、次の方法でそれを行う方が良いです：

    $('ul li').on('click', function(){
    if(!$("span", this).hasClass("act")){
    $("#createform ul li span.act").removeClass("act");
        !$("span", this).addClass("act")
    }
});

    それを機能させるには、cssを変更する必要があります（一部の部分のみが示されています）。

    #createform li .default {
    margin: 35px auto;
    width: 69px;
    height: 114px;
    background-position: 0 0;
}
#createform li .default.act {
    background-position: 0 -114px;
}

    そしてHTML：

    <li id="theme_1">
        <span class="default act">Default</span>
        <h3>Default</h3>
      </li>
    于 2013-01-28T20:23:10.613 に答える
    0

    もっと簡単な方法で行うことができるので、フィドルを確認してください：http: //jsfiddle.net/DQTKX/13/

    $('ul li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});

    CSSにもいくつか変更を加えました。

    于 2013-01-28T18:20:48.383 に答える