Zuweisen von Stil attr durch jquery

Question

Ich versuche, diese Span-Schaltflächen Farben zuweisen, wenn ich die Klasse innerhalb der Spannungsklasse, es funktioniert, aber manchmal ändert es nicht die Farbe, und ich will auch in der Lage sein habe nur einen Button als farbig gesetzt. Und ich muss auch die Werte innerhalb des Stils speichern, weil ich möchte, dass sie beim Laden der Seite eingefärbt werden.

while($stmt->fetch()): ?> 
<div class="statusicons"> 
    <a href="#" class="btn btn-xs btn-default"><span data-color="0" class=" glyphicon glyphicon-ok" style=""></span></a> 
    <a href="#" class="btn btn-xs btn-default"><span data-color="1" class=" glyphicon glyphicon-road" style=""></span></a> 
    <a href="#" class="btn btn-xs btn-default"><span data-color="2" class=" glyphicon glyphicon-remove-sign" style=""></span></a> 
    </div> 
<?php endwhile; 
$stmt->close(); ?> 

$('.statusicons').on('click', function() { 
    var color = $(this).data('color'); 
    var array = ['green', 'orange', 'red']; 
    $(this).attr('style', 'color :' + array[color]); 
}); 

Answer 1

Verwendung css(), Ihre Click-Ereignis Klicken auf den Link ändern und diese Verbindung der Spanne finden und Farbe es

$('.statusicons a').on('click', function(e) { 
    e.preventDefault(); 
    var color = $(this).find('span').data('color'); 
    var array = ['green', 'orange', 'red']; 
    $(this).find('span').css('color',array[color]); 

}); 

Sie nicht den Zustand der Farbe im Stil-Attribut speichern, um den Zustand wird bei Aktualisierung der Seite verloren, vergessen Sie nicht Ihre js in Dokument bereit Aussage zu wickeln und Ihre Veranstaltung delegieren, wenn die Statussymbole dynamisch

Answer 2

css() versuchen

hinzugefügt werden

$(this).css('color', array[color]); 

Answer 3

Möglicherweise ist dies wegen data-color Rückgabestring.

Versuchen Sie, den Index in eine ganze Zahl zu konvertieren.

$('.statusicons a').on('click', function() { 
    var color = parseInt($(this).data('color')); // Convert data-color to integer to check index 
    var array = ['green', 'orange', 'red']; 
    $(this).attr('style', 'color :' + array[color]); 
});