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 ，请检查。