So wenden Sie Stil auf das richtige Tag mit JQuery

Question

Ich versuche, mehr Logik zu my code hinzuzufügen, aber es funktioniert nicht. Ich muss mein Symbol um ein span Tag wickeln, damit ich die Zeilenhöhe richtig bekomme. Ich verwende Google Schrift:

html.erb

<!-- inside a loop --> 
<span class="wish-flex cursor" data-id="wish"> 
    <i class="material-icons cursor">favorite_border</i> Add Wishlist 
</span> 
<input type="hidden" class="wish-cls" value="<%= product.id %>" /> 

SCSS

... 

span.wish-flex{ 
    display: inline-flex; 
    vertical-align: middle; 
    padding-top: 10px 
} 

.material-icons.red { color: $hotRed; } 

span .material-icons{ 
    margin-top: -2px 
} 

JavaScript

$("[data-id=wish]").click(function(e){ 
    e.preventDefault(); 

    var value = $(this).next(".wish-cls").val(); 

    console.log("Clicked: " + value); 

    /* Applying the css when clicked 
    * 
    * We use toggleClass instead of addClass 
    * TODO: Ajax 
    */ 
    $(this).toggleClass("red"); 

}); 

Der Code wird Anwendung der Klasse red auf die Spannweite. Korrekt aber, wie man es erhält, das class auf das i Tag anzuwenden? Wenn der Benutzer auf das Herz oder das Wort klickt (Wunschliste hinzufügen), wird das Skript ausgeführt.

Vielleicht könnte ich die css ändern, um den Inline-Stil mit dem Symbol und dem Text zu erhalten und entfernen Sie die span?

Answer 1

In Ihrem Fall wird die this innerhalb des Event-Handler auf das span Element zeigen, aber was Sie versuchen zu wählen, ist das i Element darin. Sie müssen entweder find() oder children() verwenden, um von $(this) abgerufen zu werden.

$("[data-id='wish']").click(function(e){ 
    e.preventDefault(); 
    var value = $(this).next(".wish-cls").val(); 
    $("i", this).toggleClass("red"); 
}); 

Diese Signatur ist $("selector", elem)-$(elem).find("selector") ähnlich.