如何使用JQuery将样式应用于正确的标记

我正在尝试为我的代码添加更多逻辑，但它不起作用。 我必须在span标签周围包裹我的图标，以便正确地获得行高。 我正在使用谷歌字体：

html.erb

   favorite_border Add Wishlist  <input type="hidden" class="wish-cls" value="" /> 

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"); }); 

代码将类red应用于span。 正确，但如何让它将class应用于i标签？ 如果用户单击心脏或单词（添加心愿单），脚本将运行。

也许我可以更改css以获得带有图标和文本的内联样式并删除span ？

Answer 1

在您的情况下，事件处理程序内部将指向span元素，但您要选择的是其中的i元素。 所以你必须使用find()或children()从$(this)调用才能得到它。

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

这个签名$("selector", elem)类似于$(elem).find("selector") 。