字體真棒圖標和切換

Question

下午好，

我已經添加了一些字體真棒圖標到我的網站，他們看起來不錯。當用戶點擊手風琴內容時，我想切換fa-angle-up和fa-angle。

這種JavaScript做的工作就好了：

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

我遇到的問題是，已經被插入到頁面上的標籤中的所有其他圖標也切換到顯示FA-角 - 當我點擊它們時例如，下面這個不應該切換：

<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/

屬性包含選擇器[名稱* =」值」]

選擇具有指定屬性與包含給定的子串的值 元件。

這意味着您可以只選擇它們，其中class屬性中包含'fa-angle'字符串，如下所示。 （''['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'); 
    }); 
});