Question

我正在尝试向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？

Answer 1

在您的情况下，事件处理程序内部的this将指向span元素，但您要选择的是其中的i元素。因此，您必须使用$(this)或find()从$("[data-id='wish']").click(function(e){ e.preventDefault(); var value = $(this).next(".wish-cls").val(); $("i", this).toggleClass("red"); });调用才能获得它。

$("selector", elem)

此签名$(elem).find("selector")与{{1}}类似。

如何使用JQuery

1 个答案: