javascript - 单击多个元素时 jQuery 更改图标

Question

如果我有多个带有图标的 div，并且我不想在单击时更改该图标，但在某种程度上，只有我单击的那个被替换，同时所有其他图标保持不变。我有 Accordion 之类的，如果我单击第一个 Accordion 中的图标并且不使用相同的单击来关闭它，而是打开第二个 Accordion ，这会关闭第一个 Accordion ，那么第一个 Accordion 中的图标不会变回默认值。

这是 fiddle包含所有数据

基于下面的简单代码，每次单击 .clickMore 图标都会更改，但是如果您单击第二个 .clickMore 第一个，实际上所有这些图标都应该更改为默认值，因为我们不知道哪个被切换了。

我的简单JS

$('.clickMore').click(function() {
  $("i", this).toggleClass("fa-info-circle fa-close");
});

还有更简单的 HTML

<div class="clickMore">
    <i class="fa fa-info-circle"></i>
</div>

<div class="clickMore">
    <i class="fa fa-info-circle"></i>
</div>

<div class="clickMore">
    <i class="fa fa-info-circle"></i>
</div>

Answer 1

您还需要将逻辑应用于 i 元素。

$('.clickMore').click(function() {
    ...
    //Toggle class for current element's child 
    $("i", this).toggleClass("fa-info-circle fa-close"); 

    //Remove fa-close and remove fa-info-circle from other elements
    $('.clickMore').not(this).find("i").removeClass("fa-close").addClass("fa-info-circle");
});

Fiddle