jquery - 使用 jQuery 获取未在 div 中单击的其他按钮

Question

我有一个 HTML div

<div id="buttons">
   <button type="button" id= "button_1" >I am button one</button></br></br>
   <button type="button" id= "button_2">I am button two</button></br ></br>
</div>

我附加了以下 jQuery 处理程序

$("#buttons").click(function(event) {

}

我想输入代码，将单击按钮的标签类型颜色着色为红色，并将其他按钮或按钮（我可能会添加更多）标签类型颜色恢复为黑色。使用这种类型的代码：

 $("#button_1").css("color","red”);

我认为使用 .not 可以让我获得未点击的 div，例如： $("#buttons").not(“#” + event.target.id).css("color”,”black”)将所有未点击的按钮 - 基本上是那些不是 event.target 的按钮 - 设置为黑色，然后我将点击设置为红色$(“#” + event.target.id).css("color”,”black”)-

它不工作 - 因此我的查询。感谢您的任何回答。

Answer 1

您可以使用.siblings()来做到这一点，如下所示：

$("#button_1").siblings().css("color","black");

Answer 2

简单地做

$(".buttonClass").click(function(event) {
    $(this).css("color","red");
    $(".buttonClass").not(this).css("color","black");
}

buttonClass按钮的类别在哪里。".buttonClass"您可以button根据您的html替换。

Answer 3

您可以使用.siblings()选择器来选择兄弟姐妹（是的，真的）：

$('#buttons button').click(function() {
  $(this).css('color', 'red').siblings().css('color', 'black');
});

演示：http: //jsfiddle.net/Bsum5/1/

---

更好的方法是使用 CSS 并添加一个类：

$('#buttons button').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
});​

并使用这个 CSS：

​.active {
    color: red;
}​

演示：http: //jsfiddle.net/Bsum5/3/