我點擊后嘗試更改按鈕類和圖標

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

您的代碼無效，因為您使用Show Adjustments替換<i class="icon-chevron-down"></i>Hide 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");
        });