jquery - 如何检查元素是否不是选定的

Question

我正在寻找一种 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 解决方案？提前致谢！

Answer 1

您可以使用attributes-starts-with 选择器

 $(this).click(function() {
    $('[id^="button"]').css('color','red');   
    $(this).css('color','blue');
      }

Answer 2

然后为所有相关按钮添加一个公共类，而不是使用 ids

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');
})

演示：小提琴

Answer 3

如果它们都在同一个 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>

Answer 4

首先将所有按钮的颜色设为红色。上普通课

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

我认为这应该可行。