Swap Bootstrap-Textklasse für ein Google-Material Symbole

Question

OK Ich bin neu in Javascript Vorwort so dass dies nicht der optimale Weg, dies zu tun sein kann ...

Ich versuche, die Farbe eines Material Symbol zu ändern, wenn es wird geklickt. im Grunde versuche ich es ein- und auszuschalten. Das Problem ist mein Code, während es findet, dass das Symbol die Klasse nicht liest ... Ich habe versucht, eine Klasse hinzuzufügen, benutze eine ID, sogar einen Namen und es kann es nicht lesen. Ich habe andere Antworten gesehen, wo Bilder ausgetauscht werden und ich habe versucht, mit dem Bild auszutauschen, aber ich möchte nur die Farbe ändern.

javascript:

function updateFavorites() 
{ 
if($(this).find($("#staricon")).hasClass('text-warning')) 
{ 
$(this).find($("#staricon")).addClass('text-warning'); 

} 
else 
{      
$(this).find($("#staricon")).removeClass('text-warning'); 
} 
} 

HTML:

<a class=" stats pull-right " href="javacript:void" ><span 
onclick="updateFavorites()"><i id="staricon" class="text-warning material- 
icons " title="Favorite" >star</i></span></a> 

Answer 1

danke Ihnen allen für die Hilfe ... ich es bekam die folgende Arbeit mit:

JAVASCRIPT

updateFavorites(id){ 
if($(this).find('#staricon'+id)){ 
    if($('#staricon'+id).hasClass('star-color')) { 
     $('#staricon'+id).removeClass('star-color'); 
    } 
    else { 
     $('#staricon'+id).addClass('star-color'); 
    } 
} 
} 

HTML:

<a class=" stats pull-right " href="javacript:void" ><span id="staricon' . $story_id .'" onclick="updateFavorites(' . $story_id . ')"><i class=" material-icons " title="Favorite" >star</i></span></a> 

Answer 2

Unten ist ein Code, der Klasse #staricon hinzufügen wird, wenn Sie darauf klicken, und es wird geprüft, ob es bereits diese Klasse hat. In CSS können Sie die Farbe für diese Klasse definieren.

Natürlich können Sie Klasse hinzufügen oder Klasse entfernen oder andere Aktionen ausführen. Hoffe, dieser Code hilft dir.

$(".stats").on('click', function() { 
 
    if (!$(this).find("#staricon").hasClass('SOME_CLASS')) 
 
    $(this).find("#staricon").addClass('SOME_CLASS'); 
 
})

.SOME_CLASS { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class=" stats pull-right " href="javacript:void"><span><i id="staricon" class="text-warning material- 
 
    icons " title="Favorite" >star</i></span></a>