字體很棒的圖標和切換

Question

下午好，

我在網站上添加了一些很棒的字體圖標，它們看起來很棒。 當用戶單擊手風琴內容時，我想在fa-angle-up和fa-angle-down之間切換。

這個javascript做得很好：

$(function() {
    $('a').click(function() {
        $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
    });
});

我遇到的問題是，當我單擊它們時，插入標簽頁面中的所有其他圖標也在切換以顯示fa-angle-down。 例如，此選項不應切換：

<i class="fa fa-envelope"></i>

如何僅切換廣角圖標而不切換標簽中的其他圖標？

謝謝。

Answer 1

$( "a" ).toggle(function() {
  console.log( "First handler for .toggle() called." );
  $(this).find('i').removeClass('fa-angle-up');
  $(this).find('i').addClass('fa-angle-down');  
}, function() {
  console.log( "Second handler for .toggle() called." );
  $(this).find('i').removeClass('fa-angle-down');
  $(this).find('i').addClass('fa-angle-up');  
});

Answer 2

https://api.jquery.com/category/selectors/attribute-selectors/

屬性包含選擇器[name * =“ value”]

選擇具有指定屬性且其值包含給定子字符串的元素。

這意味着您只能選擇在類屬性內具有“ fa-angle”字符串的它們，如下所示。

$（'i [class * =“ fa-angle”]'）。toggleClass（'fa-angle-down fa-angle-up'）;

Answer 3

您可以嘗試在下面使用此代碼：

$(function() {
 $('a').click(function() {
      $(this).find('[class^="fa-angle"]').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
  });
 });