Question

为什么我不能使用.a和.c来更改.next()和.closest()类的背景？

$(".c").on("click", function() {
  $(this).closest('.a').css('background','red');
})

$(".a").on("click", function() {
  $(this).next('.c').css('background','red');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="a">Change color</button>
  <button class="b">Another Button</button>
  <button class="c">Change color</button>
</div>

<div>
  <button class="a">Change color</button>
  <button class="b">Another Buttor</button>
  <button class="c">Change color</button>
</div>

Answer 1

从jQuery.closest开始，最接近的遍历祖先而不是兄弟姐妹。

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先，获得与选择器匹配的第一个元素。

尝试以下。使用 prevAll 和 nextAll

$(".c").on("click", function() {
  $(this).prevAll('.a').css('background','red');
})

$(".a").on("click", function() {
  $(this).nextAll('.c').css('background','red');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="a">Change color</button>
  <button class="b">Another Button</button>
  <button class="c">Change color</button>
</div>

<div>
  <button class="a">Change color</button>
  <button class="b">Another Buttor</button>
  <button class="c">Change color</button>
</div>

Answer 2

尝试一下：

$(".c").on("click", function() {   
   $(this).parent('div').find('.a').css('background','red'); 
})

$(".a").on("click", function() {  
   $(this).parent('div').find('.c').css('background','red'); 
})

Answer 3

我认为这段代码会更好地工作：

$(document).ready(function(){
$(document).on("click", '.a', function(){
  $(this).parent().find('.a').css({'background':'red', 'color':'white'});
  console.log("a class clicked");
});

$(document).on("click", '.c', function(){
  $(this).parent().find('.c').css({'background':'blue', 'color':'white'});
  console.log("c class clicked");
});
});

查看完整的工作演示here

无法正确使用.next和.closest

3 个答案: