我有 3 个 div，每个都有一个黑色和红色的矩形。我希望当您单击其中一个黑色矩形时，所有红色都会将颜色更改为白色，除了单击的黑色矩形的同级红色矩形之外。 我不想添加任何更多的类 id 或更改 dom。 我一直在尝试但没有成功。提前谢谢。
$(document).ready(function(){
$(".black-rectangle").click(function(){
$(".red-rectangle").not(this.siblings(".rec2")).css("background-color","#fff");
})
}) .black-rectangle{
height: 50px;
width: 50px;
background-color:#000;
border: 5px solid green;
margin-top: 10px;
}
.red-rectangle{
height: 50px;
width: 50px;
background-color: red;
border: 5px solid green;
margin-top: 10px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
<div class="black-rectangle"></div>
<div class="red-rectangle"</div>
</div>
<div>
<div class="black-rectangle"></div>
<div class="red-rectangle"</div>
</div>
<div>
<div class="black-rectangle"></div>
<div class="red-rectangle"</div>
</div>
</body>最佳答案
siblings 是一个 jQuery 方法，但 this 是一个 DOM 元素，而不是 jQuery 对象。您需要使用 $(this) 将其包装在 jQuery 对象中。
您的 HTML 中没有 rec2 类，因此我将其更改为没有选择器的 .siblings()。
$(document).ready(function() {
$(".black-rectangle").click(function() {
var $this = $(this);
$(".red-rectangle").not($this.siblings()).css("background-color", "#fff");
})
}).black-rectangle {
height: 50px;
width: 50px;
background-color: #000;
border: 5px solid green;
margin-top: 10px;
}
.red-rectangle {
height: 50px;
width: 50px;
background-color: red;
border: 5px solid green;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
<div class="black-rectangle"></div>
<div class="red-rectangle"></div>
</div>
<div>
<div class="black-rectangle"></div>
<div class="red-rectangle"></div>
</div>
<div>
<div class="black-rectangle"></div>
<div class="red-rectangle"></div>
</div>
</body>关于javascript - 选择器非和 sibling ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28822564/