Question

我尝试在点击时更改三角形方向，使用此代码，一切都很完美，但现在我想改变第一个方向，因为列表是隐藏的，所以，为什么当我改变第一个fa-用右边插入并相应地更改另一个三角形它不起作用？

collapsible.append('<h5>' + scheme.name + " " + '<em class="fa fa-caret-down"></span></h5>');

if ($('.SchemeSearchExp').length) {
    $("div.schemeHead>h5").click(function () {
        $(this).next('.streetname').toggle();
        $(this).children("em").toggleClass('fa-caret-right');
    });
}

Answer 1

在操作选择器（即删除和添加类）时使用Event Delegation使用.on()。

将您的代码更改为

~~$(document).on('click', ".fa-caret-right", function(){ $(this).next('.streetname').toggle(); $(this).toggleClass('fa-caret-down'); });~~

$(document).on('click', "em.fa", function () {
    $(this).next('.streetname').toggle();
    $(this).toggleClass('fa-caret-right fa-caret-down');
});

代替document，您应该使用最近的静态容器。好的阅读Direct and delegated events

此外，您应该在事件处理程序中使用if块

ToggleClass与FontAwesome无法正常工作

1 个答案: