Я пытаюсь изменить класс кнопки и значок при нажатии

Question

Я пытаюсь выполнить код javascript в событии click, но его не работает.

<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"); 
     });