如何访问事件模板的dom元素？_JavaScript

如何在流星Template.name.events中访问模板的元素？ 这是一个简单的购物车的示例，不能在cart中访问 “ qty”。

模板

<div class="col-sm-3">
   {{name}}
 </div>
 <div class="col-sm-3">
  ${{cost}}
 </div>
 <div class="col-sm-3">
  <input type="number" class="qty" length="3" min="1" max="5">
 </div>
 <div class="col-sm-3">
  <button class="btn btn-success add">Add</button>
 </div>

模板事件

Template.productsList.events({
  'click .add': function (event) {
    cart.push(this); 
    console.log(cart);


  }

在Meteor中， this参数是指触发事件的元素的数据上下文。 看。 例如，不要在jquery事件中this混淆，它是对DOM调用元素的引用。 因此，您可以访问每个products name ， id和cost 。 如果要输入的值，一种方法是使用表单并发送整个表单，或将模板实例传递给事件并在其中查找，就像这样

Template.productsList.events({
  'click .add': function (event, template) {
    var qty = template.find('.qty').value;
    console.log(qty);
}

但是，我确实要提到，这将遍历模板并找到类“ qty”的第一个元素，在您的情况下，如果有多个具有相同类的元素，则不会达到您的目标。 在您的情况下，您应该改用唯一ID。 例如，您可以这样做

<input type="number" class="qty" id="product_{{id}}" length="3" min="1" max="5">

接着

var qty = template.find('#product_'+this.id).value;

在事件中。 那应该做的。 请让我知道这对你有没有用。

如何访问事件模板的dom元素？

问题描述

1楼