Jquery toggleClass不会更改类

Question

我有一个问题无法用toggleClass((解决

当我有这个HTML:

<div class="select">
<p>Some Text</p>
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</div>

这个jquery：

$('.select').click(function () {
$(this).find('i').toggleClass('active');
});

一切正常。当单击具有类select的div时，类active将添加到i中

但是当我有这个HTML(有两个div(时：

<div class="select">
<p>Some Text</p>
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="select">
<p>Some Text</p>
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</div> 

和以前一样的jquery不能正常工作。如果单击first div，则不会添加active class。如果单击second div，则会添加active class。

为什么？

Answer 1

您的代码似乎也能很好地使用两个div。如果还有其他事情，请告诉我。

$('.select').click(function () {
$(this).find('i').toggleClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select">
<p>Some Text</p>
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="select">
<p>Some Text</p>
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</div>