單擊多個元素時，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");
});

小提琴