0

特定の要素が他の要素ではないかどうかを確認する方法を jQuery メソッドで探しています。これは、以前に行った方法が次のとおりだったため、一般的な質問です。

5 つのボタンを備えたメニュー バーがあり、ボタンがクリックされた場合に何かを起動したいとします。

$('#button1').click(function() {
   $(this).css('color','blue');
   $('#button2').css('color','red');
   $('#button3').css('color','red');
   $('#button4').css('color','red'); 
}

$('#button2').click(function() {
   $(this).css('color','blue');
   $('#button1'.css('color','red');
   $('#button3').css('color','red');
   $('#button4').css('color','red'); 
} // and so on for #button3, 4 ...

もちろん、これは機能します。しかし、いくつかのボタンのコードが多すぎるようです。問題は、次のような質問をするにはどうすればよいかということです。

$(this).click(function() {
  $(this).css('color','blue');
  $(all others).css('color','red'); }

配列を使用する必要がありますか、または jQuery ソリューションはありますか? 前もって感謝します！

4

4 に答える 4

1

attributes-starts-with セレクターを使用できます

 $(this).click(function() {
    $('[id^="button"]').css('color','red');   
    $(this).css('color','blue');
      }
于 2013-09-16T12:28:46.260 に答える
1

ID を操作する代わりに、関連するすべてのボタンに共通のクラスを追加します。

var $btns = $('.mybuttons').click(function(){
    $(this).css('color','blue');
    $btns.not(this).css('color','red'); 
})

デモ:フィドル

アップデート：

$('body').on('click', '.sublink', function () {
    $(this).css('color', '#393fad');
    $('.sublink').not(this).css('color', '#8b8b8b');
})

デモ:フィドル

于 2013-09-16T12:29:09.983 に答える
0

それらがすべてこのように同じdivにある場合は、使用できます.siblings()

jQuery

$(document).ready(function () {
    $('div button').on('click', function () {
        $(this).css('color', 'blue').siblings().css('color', 'red');
    });
});

HTML

<div>
<button id="button1">test1</button>
<button id="button2">test2</button>
<button id="button3">test3</button>
<button id="button4">test4</button>
</div>
于 2013-09-16T12:30:10.800 に答える
0

最初にすべてのボタンの色を赤にします。共通のクラスを取る

 $('.all_button').click(function() {
    $('.all_button').css('color','red');
    $(this).css('color','blue');
)};

これはうまくいくはずだと思います。

于 2013-09-16T12:31:43.413 に答える