2

約 10 項目のナビゲーション メニューがあり、このコードをまとめて、選択されているリンクと選択されていないリンクを更新します。クラスを手動で更新します。問題は、おそらくおわかりのように、非効率的であり、更新するのが面倒なことです。それを行うより良い方法はありますか？

$('#Button1').click(function(){
        $('#Button1').addClass("selectedItem");
        $('#Button2').removeClass("selectedItem");
        $('#Button3').removeClass("selectedItem");
        $('#Button4').removeClass("selectedItem");
        $('#Button5').removeClass("selectedItem");
        $('#Button6').removeClass("selectedItem");
        $('#Button7').removeClass("selectedItem");
        $('#Button8').removeClass("selectedItem");
        $('#Button9').removeClass("selectedItem");
        $('#Button10').removeClass("selectedItem");
    });
4

3 に答える 3

2

あなたはこのようなことを試すことができます -

$("[id^='Button']").removeClass("selectedItem");
$('#Button1').addClass("selectedItem");

selectedItemこれにより、最初に「ボタン」で始まる id 属性を持つすべての要素からすべてのクラスが削除されます。2 番目のコマンドは、クラスをButton1

次のように、すべての要素を同じハンドラーで単純にバインドすることもできます-

var $buttons = $("[id^='Button']");

$buttons.on('click', function ()
{
  $buttons.removeClass("selectedItem");
  $(this).addClass("selectedItem");
});

各要素について、クリックするとクラスが削除されます - クリックされた要素にクラスが追加されます。

Attribute Starts With Selector [name^="value"]セレクターをチェックアウトします。

于 2013-04-04T19:21:32.423 に答える
2

クラスを使用することをお勧めします。これがまさにその目的であり、要素のグループを示すためです。Lix によって提案された方法を使用してボタンを簡単に選択できますが (HTML を変更できない場合は、この方法を使用する必要があります)、 class を使用する方がより控えめです。

var $buttons = $('.button').on('click', function() {
    $buttons.removeClass('selectedItem');
    $(this).addClass('selectedItem');
});

メタ例: http://jsfiddle.net/88JR2/

于 2013-04-04T19:32:38.010 に答える
0

クラス .button を作成し、それをすべてのボタンに適用してから、

$('#Button1').click(function(){
    $('.button').removeClass("selectedItem");
    $('#Button1').addClass("selectedItem");

});
于 2013-04-04T19:21:03.760 に答える