Font awesome Symbole und toggle

Question

Guten Tag,

Ich habe einige Schriftart tolle Symbole zu meiner Website hinzugefügt und sie sehen toll aus. Ich möchte zwischen dem Fa-Angle-Up und dem Fa-Angle-Down hin und her schalten, wenn der Benutzer auf den Akkordeon-Inhalt klickt.

Dieses Javascript, um die Arbeit geht es gut:

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

Das Problem, das ich habe, ist, dass alle anderen Symbole, die innerhalb des Tags auf der Seite eingefügt worden sind, Makeln, um auch die fa-Winkel zu zeigen - runter wenn ich sie anklicke. Dieser, zum Beispiel, sollte nicht wechseln:

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

Wie kann nur fa-Winkel-umzuschalten, ohne andere Symbole in Tags Makeln?

Vielen Dank.

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/

Attribut enthält Selector [Name * =“Wert“]

Wählt Elemente, die das angegebene Attribut mit einem Wert enthält einen bestimmten Teilkette haben.

was bedeutet, dass Sie sie nur auswählen können, die eine 'fa-angle' Zeichenfolge innerhalb des Klassenattributs hat, wie unten.

$ ('i [klasse * = "fa-angle"]'). ToggleClass ('fa-angle-down fa-angle-up');

Answer 3

können Sie versuchen, diesen Code zu verwenden unter:

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