字体真棒图标和切换

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'); 
    }); 
});