Измените замечательный значок / класс при нажатии на элемент - PullRequest
Новая
       7

Измените замечательный значок / класс при нажатии на элемент

2 голосов
/ 08 марта 2020

У меня есть значок <i id="test" class="fas fa-times-circle"></i>

Что при нажатии я хотел бы изменить его классы, чтобы он стал <i id="test" class="far fa-times-circle"></i>

Так что в основном удалите fas и добавьте far или наоборот при повторном нажатии.

https://jsfiddle.net/bobbyrne01/ptsgba1h/7/

HTML: 

<i class="fas fa-times-circle"></i>
<i class="far fa-times-circle"></i>
<hr/>

<div>
  <i id="test" class="fas fa-times-circle"></i>
</div>

Javascript: 

$(document).ready(function() {
  $('#test').on('click', function() {
    console.log(this);
    $(this).toggleClass('fas');
    $(this).toggleClass('far');
  });
});

Есть идеи, почему классы не переключаются?

Ответы [ 2 ]

3 голосов
/ 08 марта 2020

вы используете потрясающую версию SVG с JavaScript, которая заменяет <i> теги (и другие), соответствующие набору критериев, на <svg>

, поэтому в вашем случае измените data-prefix attr на fas Или far

вот полный пример 

$(document).ready(function() {
  $(document).on('click','#test', function() {
    console.log(this);
    //$(this).data("prefix",$(this).data("prefix")== 'fas' ? 'far' : 'fas')
    $(this).attr("data-prefix", function(index, attr){
      return attr == 'fas' ? 'far' : 'fas';
	  })
  });
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<i class="fas fa-times-circle"></i>
<i class="far fa-times-circle"></i>
<hr/>

<div>
  <i id="test" class="fas fa-times-circle"></i>
</div>
2 голосов
/ 08 марта 2020

Элементы <i> заменяются элементами svg на основе класса fa-* при использовании с far / fas, и они содержат классы такого типа: svg-inline--fa fa-times-circle fa-w-16. По этой причине код переключения классов не работает

Лучшим решением было бы показать / скрыть соответствующий значок при нажатии.

...