使用jquery更改另一个元素下的html元素类

Question

我试图改变类HTML元素的我使用jquery。 我想要实现的是当用户点击div 时，我希望被点击的div下的i的 CSS 类发生变化。

到目前为止，我无法实现这一目标。 任何提示将不胜感激。

 $(document).ready(function() { $('div.gen').click(function() { $(this).next('span i').toggleClass('fa-angle-double-up fa-angle-double-down'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li> <div class="gen"><span> <div class="inline-block"> 👨 <figcaption>John</figcaption> </div> <i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i> <div class="inline-block"> 👩 <figcaption>Jane</figcaption> </div> </span> </div> </li> <hr> <li> <div class="gen"><span> <div class="inline-block"> 👨 <figcaption>John2</figcaption> </div> <i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i> <div class="inline-block"> 👩 <figcaption>Jane2</figcaption> </div> </span> </div> </li>

谢谢

Answer 1

find 方法应该解决问题而不是 next 因为 find 遍历 DOM

 $(this).find('span i').toggleClass('fa-angle-double-up fa-angle-double-down');

Answer 2

您可以使用 jQuery 的find ，如下所示：

 $(document).ready(function() { $('div.gen').click(function() { $(this).find('span i').toggleClass('fa-angle-double-up fa-angle-double-down'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li> <div class="gen"><span> <div class="inline-block"> 👨 <figcaption>John</figcaption> </div> <i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i> <div class="inline-block"> 👩 <figcaption>Jane</figcaption> </div> </span> </div> </li> <hr> <li> <div class="gen"><span> <div class="inline-block"> 👨 <figcaption>John2</figcaption> </div> <i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i> <div class="inline-block"> 👩 <figcaption>Jane2</figcaption> </div> </span> </div> </li>