如何使用 JQuery 将样式应用于正确的标签答案

【问题标题】：How to apply style to the correct tag with JQuery如何使用 JQuery 将样式应用于正确的标签
【发布时间】：2016-07-23 20:03:50
【问题描述】：

我正在尝试向my code 添加更多逻辑，但它不起作用。我必须将我的图标包裹在 span 标签周围，这样我才能正确获得行高。我正在使用谷歌字体：

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

});

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

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

【问题讨论】：

$("i", this).toggleClass("red");
@RajaprabhuAravindasamy 谢谢！这很好用。您能否参考答案或类似内容的链接？发布你的答案。

标签： javascript jquery css ruby-on-rails

【解决方案1】：

在您的情况下，事件处理程序内部的 this 将指向 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")。

【讨论】：