崩溃时Bootstrap 4更改图标

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.然后,当你调用find,removeClass并addClass在OUTER所有图标将被改变,这就是为什么"没有工作".

要解决此问题,您需要创建一个包含一组button和.collapse元素的单元包装器.这样,$(this).parent()将指向该组,并且仅更改单击的按钮图标.

我已经为修复做了一个jsfiddle,请检查.