Struggling to enhance the functionality of my code with no luck. I need to enclose my icon inside a span
tag in order to ensure proper line height. Currently utilizing Google font:
html.erb
<!-- within 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");
});
The script is adding the class red
to the span. How can I make it apply the class
to the i
tag instead? The action should be triggered if the user clicks either the heart icon or the text (Add Wishlist).
Perhaps adjusting the css
to achieve the desired inline styling with the icon and text, without the need for the span
, could be a solution?