我尝试在单击时更改按钮 class 和图标

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，这就是为什么当您尝试 remove/add [时无法访问元素 i class 在下一行。我使用 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");
        });

我尝试在单击时更改按钮 class 和图标

I try to change the button class and icon upon clicking

javascript

jquery

icons

button