Question

我有3个div，每个都有一个黑色和红色矩形。我希望当你点击其中一个黑色矩形时，所有红色都会将颜色变为白色，但黑色的兄弟会点击黑色。我不想添加更多类ID或更改dom。我一直在尝试没有成功。 thx in advanced。

＆＃13;

  $(document).ready(function(){
	$(".black-rectangle").click(function(){
		$(".red-rectangle").not(this.siblings(".rec2")).css("background-color","#fff");
	})
})

＆＃13;

    .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;
	}

＆＃13;

<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>

＆＃13;

Answer 1

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>

选择者不和兄弟姐妹

1 个答案: