Question

如果我有多个带图标的div，我不想在点击时更改该图标，但在某种程度上，只有我点击的那个被替换，同时所有其他图标保持不变。我有手风琴，如果我点击第一个手风琴中的图标并且不使用相同的点击关闭它，而是打开第二个手风琴，关闭第一个手风琴，然后第一个手风琴中的图标不会变回默认值。 / p>

这是包含所有数据的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

单击多个元素上的jQuery更改图标

1 个答案: