Question

我尝试在点击事件中关注javascript代码，但它不起作用。

<button type="button" class="btn btn-success btnHideItemAdjustment"> <i class="icon-chevron-down"></i>Hide Adjustments</button>'

('.btnHideItemAdjustment').on('click',function (e) {

    $(e.target).removeClass('btnHideItemAdjustment').addClass('btnShowItemAdjustment').text('Show Adjustments');
    $(e.target).find('i').removeClass("icon-chevron-up").addClass("icon-chevron-down");
});

Answer 1

您的代码无效，因为您将<i class="icon-chevron-down"></i>Hide Adjustments部分替换为Show Adjustments，这就是当您尝试在下一行中删除/添加类时无法访问元素i的原因。我使用e.currentTarget而非e.target，因为e.currentTarget始终引用btnHideItemAdjustment元素，而e.Target有时可以引用具有span元素的<button type="button" class="btn btn-success btnHideItemAdjustment"> <i class="icon-chevron-up"></i><span>Hide Adjustments</span></button> $('.btnHideItemAdjustment').on('click',function (e) { $(e.currentTarget).removeClass('btnHideItemAdjustment').addClass('btnShowItemAdjustment').find('span').html('Show Adjustments'); $(e.currentTarget).find('i').removeClass("icon-chevron-up").addClass("icon-chevron-down"); });元素按钮的文本取决于您单击的位置。

{{1}}

我点击后尝试更改按钮类和图标

1 个答案: