选择器不和兄弟姐妹

debugcn 发表于 Dev

用户4591043

我有3个div，每个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方法，但是thisDOM元素，而不是jQuery对象。您需要使用$(this)将其包装在jQuery对象中。

rec2您的HTML中没有类，因此我将其更改为仅.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>