javascript - $(this).attr ('id' ) 仅适用于实际元素

Question

我使用以下代码更改嵌套 Bootstrap 可折叠元素( Accordion )中的图标。但是当我点击一个嵌套元素时——例如第三层 - 第二个和第一个父元素的图标也将更改。我只希望我的点击操作影响它被直接调用的元素。

$(document).ready(function() {
    $('.collapse').on('show.bs.collapse', function() {
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-chevron-down"></i>');
    });
    $('.collapse').on('hide.bs.collapse', function() {
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-chevron-right"></i>');
    });
});

如何在没有父元素的情况下仅更改当前元素的图标？

Answer 1

您注意到的问题不是由于不正确的 ID 引用，实际上也是由于在父元素上触发了事件。您可以通过阻止事件在 DOM 树中“冒泡”(即在目标元素的所有父元素上触发)来解决此问题。

通过调用 stopPropagation 防止事件冒泡到父元素在事件对象上。

来自 the jQuery docs :

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(document).ready(function() {
    $('.collapse').on('show.bs.collapse', function(e) {
        e.stopPropagation();
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span')
            .html('<i class="glyphicon glyphicon-chevron-down"></i>');
    });
    $('.collapse').on('hide.bs.collapse', function(e) {
        e.stopPropagation();
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span')
            .html('<i class="glyphicon glyphicon-chevron-right"></i>');
    });
});