изменить иконку Fontawesome с помощью Jquery - PullRequest
Новая
       8

изменить иконку Fontawesome с помощью Jquery

0 голосов
/ 19 марта 2019

Я хотел бы изменить стиль стрелки при клике.

Когда гармошка закрыта, стрелка опущена. Когда пользователь нажимает стрелку вниз, гармошка открывается, и стрелка поворачивается вверх. 

 <button type="button" class="btn btn-warning btn-sm " onclick="changeToggle(this)"><i class="fa fa-arrow-down" ></i></button> 


function changeToggle(btn) {
 $(btn).closest("tr").next().toggle();     
 $(btn).removeClass('fa-arrow-down').addClass('fa-arrow-up');
}

Обычно в jQuery, если я знаю идентификатор родительского элемента, я мог бы использовать $("#id i"), потому что я использовал this в качестве параметра в коде.

Я не уверен, как получить доступ к внутренней части кнопки, чтобы изменить стиль стрелки.

1 Ответ

2 голосов
/ 19 марта 2019

Вам просто нужно найти вложенную .fa кнопки.Для этого вы можете использовать контекстную версию $(), а затем просто переключать классы назад и вперед. 

function changeToggle (btn) {
  $('.fa', btn).toggleClass('fa-arrow-down fa-arrow-up');
}
.fa-arrow-down { color: red; }
.fa-arrow-up { color: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-warning btn-sm " onclick="changeToggle(this)"><i class="fa fa-arrow-down">text for easy change</i></button>
...