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

【问题标题】：I try to change the button class and icon upon clicking我尝试在单击时更改按钮类和图标
【发布时间】：2015-02-14 23:22:55
【问题描述】：

我尝试在点击事件中遵循 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");
});

【问题讨论】：

给出的代码不足以说明问题出在哪里。请使用您的 html 代码以及点击事件代码进行更新。
我添加了更多代码。谢谢。
文本按钮更改正常，但图标消失。
您的html代码中没有.btnShowInvoiceItems类的元素触发点击事件。
对不起，我打错了。我已经纠正了。但是代码不起作用。文本更改得很好，但图标没有更改。

标签： javascript jquery button icons

【解决方案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");
        });

【讨论】：