如果有人单击“ 单击此处 ”文本中的任意一个,则[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
答案 0 :(得分:0)
jQuery .closest()方法搜索祖先,由于.expandContainer不在p内,因此您的代码无法正常工作。
使用此:
function learnMore(){
$('.learnMore').click(function(){
$(this).find('span').toggleClass('green');
});
$('.expandContainer').click(function(){
$('.learnMore').find('span').toggleClass('green');
});
}
答案 1 :(得分:0)
您的选择器错误。如我的示例所示尝试。 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>