Bootstrap 4 Change圖標在折疊中

Question

我使用bootstrap 4 alpha 6版本。 在我的頁面中，我有幾個折疊塊。 我想在用戶打開/關閉該塊時更改圖標。 因為我有幾個這樣的塊，所以我使用了類，但是沒有用。 我怎么了 PS當我在JS中使用id時效果很好，但是如您所見，我有多個折疊塊，並且不想“復制並粘貼”。

的HTML：

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-projects" aria-expanded="false" aria-controls="collapse-projects">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-projects">
           ***SOME CONTENT***
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-tasks">
           ***SOME CONTENT***
        </div>
    </div>
</div>

JS：

$(document).ready(function () {
            $('.collapse')
                .on('shown.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye")
                        .removeClass("fa-eye")
                        .addClass("fa-eye-slash");
                })
                .on('hidden.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye-slash")
                        .removeClass("fa-eye-slash")
                        .addClass("fa-eye");
                });
        });

Answer 1

問題是：您所有的button和.collapse元素都在同一DOM級別中，這意味着當.collapse的shown.bs.collapse或hidden.bs.collapse事件時， $(this).parent()事件處理程序指向.collapse的父級，即代碼中未顯示的最外部的父級。 讓我們將其設為OUTER 。 然后，當您在OUTER上調用find ， removeClass和addClass時，所有圖標都會更改，這就是“它不起作用”的原因。

若要解決此問題，您需要制作一個單元包裝，其中包含一組button和.collapse元素。 這樣， $(this).parent()將指向該組，並且僅更改單擊的按鈕圖標。

我為修復做了一個jsfiddle ，請檢查。