2017-08-18 221 views
0

下午好,字體真棒圖標和切換

我已經添加了一些字體真棒圖標到我的網站,他們看起來不錯。當用戶點擊手風琴內容時,我想切換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> 

如何切換隻有正方形圖標而不切換標籤中的其他圖標?

謝謝。

+0

提供身份證到特定圖標元素,開展它的變化並不是所有的我。 –

回答

0
$("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'); 
}); 
0

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

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

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

這意味着您可以只選擇它們,其中class屬性中包含'fa-angle'字符串,如下所示。 (''['class * ='fa-angle「]')。toggleClass('fa-angle-down fa-angle-up');

+0

明白了,謝謝! –

0

您可以嘗試使用下面這段代碼:

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