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

Question

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

摆弄所有数据

基于下面的简单代码，每次单击.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");
});

小提琴