Bootstrap 4 更改折叠中的图标

Question

我使用 bootstrap 4 alpha 6 版本。在我的页面中，我有几个折叠块。我想在用户打开/关闭该块时更改图标。由于我有几个这样的块，我使用了类，但它不起作用。我做错了什么？附：当我在 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

。然后，当您在

find

上调用

removeClass

、

addClass

和

OUTER

时，所有图标都会更改，这就是为什么“它不起作用”。

要解决此问题，您需要制作一个单元包装器，其中包含一组

button

和

.collapse

元素。这样，

$(this).parent()

就会指向该组，并且只有单击的按钮图标发生变化。

我已经制作了修复程序的片段，请检查：

$(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");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b4f468aefc.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div class="wrapper">
  <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 class="collapse" id="collapse-projects">
    ***SOME CONTENT***
  </div>
</div>

<div class="wrapper">
  <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 class="collapse" id="collapse-tasks">
    ***SOME CONTENT***
  </div>
</div>