Question

下午好，

我在网站上添加了一些字体很棒的图标，看起来很棒。当用户点击手风琴内容时，我希望在fa-angle-up和fa-angle之间切换。

这个javascript正在完成这项工作：

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

我遇到的问题是，我在标签页面上插入的所有其他图标也会切换，以便在我单击它时显示fa-angle-down。例如，这个不应该切换：

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

如何在不翻转标签中的其他图标的情况下仅切换fa角度图标？

谢谢。

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”]

选择具有指定属性的元素   包含给定的子字符串。

这意味着您只能选择具有＆＃39; fa-angle＆＃39; class属性中的字符串如下所示。

$（＆＃39; i [class * =＆＃34; fa-angle＆＃34;]＆＃39;）。toggleClass（＆＃39; fa-angle-down fa-angle-up＆＃39; ）;

Answer 3

您可以尝试使用以下代码：

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

字体真棒图标和切换

3 个答案: