Question

如果有人单击“ 单击此处 ”文本中的任意一个，则[ICON]文本会更改颜色。我能够使Click here 1起作用，但不能使2和3起作用。请帮助并告诉我为什么我的代码不起作用。

HTML

<p class="learnMore"><strong>Click here 1</strong> <span class="red"> [ ICON ]</span></p>

<ul class="expandContainer">
<li>Click here 2</li>
<li>Click here 3</li>
</ul>

JS

function learnMore(){
  $('.learnMore').click(function(){
  $('.learnMore span').toggleClass('green');  
});  

$('.expandContainer').click(function(){    
$(this).closest('p').find('span').toggleClass('green'); 
}); 
}

这是codepen

Answer 1

jQuery .closest（）方法搜索祖先，由于.expandContainer不在p内，因此您的代码无法正常工作。

使用此：

function learnMore(){
  $('.learnMore').click(function(){
    $(this).find('span').toggleClass('green');  
  });  

  $('.expandContainer').click(function(){    
    $('.learnMore').find('span').toggleClass('green'); 
  }); 
}

Answer 2

您的选择器错误。如我的示例所示尝试。 PS：我也将点击动作更改为单个li的点击动作。如果您希望在单击整个ul容器后立即采取措施，请将其更改回：

  $('.expandContainer').click(function(){    
      $(this).siblings('p').find('span').toggleClass('green'); 
  });

工作示例：

$( document ).ready(function() {    
  learnMore(); 
});  

function learnMore(){
  $('.learnMore').click(function(){
      $('.learnMore span').toggleClass('green');  
  });  

  $('.expandContainer li').click(function(){    
      $(this).parent('ul').siblings('p').find('span').toggleClass('green'); 
  });   
   
}

.red {color:red}
.green{color:green}


.learnMore {cursor:pointer}
.expandContainer {cursor:pointer; border:1px solid red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p class="learnMore">
  <strong>Click here 1</strong> 
  <span class="red"> [ ICON ]</span>  
</p>

<ul class="expandContainer">
<li>Click here 2</li>
<li>Click here 3</li>
</ul>

更改上一个选择器的类>子元素

2 个答案: