javascript - 正确使用 currentTarget 的点击事件 jQuery

Question

我构建了这个小示例。我有一些元素，其中一些有 15% 的折扣。我想在按下“购买”时将此值(价格的 15%)推送到数组中，并且仅当按下的商品有折扣时。

我的想法是使用 currentTarget 来识别哪些商品有折扣，哪些没有，但我的函数在控制台中总是返回相同的消息:“此商品没有折扣”，当然没有任何内容被推送到数组中。

我以错误的方式使用了 currentTarget？我也尝试使用 $(this) 而不是 e.currentTarget 但没有任何改变。

$(document).ready(function(e){
  var $event = $(e.currentTarget).closest('.event');
  var discountCustomer = [];

  function addItem() {
    if($event.find('.discount').length) {
      var $discount = ((parseInt($event.find('.price').text()))*15)/100;
      console.log($discount);
      discountCustomer.push($discount);
      
      $totalDiscount=0;
      for (var i = 0; i < discountCustomer.length; i++) {
        $totalDiscount += discountCustomer[i] << 0;
      }
      
      $('.totalDiscount').html(($totalDiscount) + ' €');
      
    } else {
      console.log('This seminar has NO discount');
    }
    console.log(discountCustomer);
  }

  $('.buy').click(function() {
    addItem();
    })
})

.event {
  border: 1px solid black;
  padding: 3px;
  height: 20px;
  width: 400px;
  margin-bottom: 10px;
}

.event > * {
  float: left;
  margin-right: 15px;
}

.total > * {
  float: left;
}

.totalDiscount {
  margin-left: 10px;
}

.clear {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <div class="item">Item 1</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 2</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 3</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
  <p>Total Discount: </p>
  <p class="totalDiscount"></p>
</div>

Answer 1

您还应该将 e 传递给 addItem 函数 var $event = $(e.currentTarget).closest('.event'); 应该在 addItem 函数中

$(document).ready(function(){
  
    var discountCustomer = [];

  function addItem(e) {
    var $event = $(e.currentTarget).closest('.event');
    if($event.find('.discount').length) {
      var $discount = ((parseInt($event.find('.price').text()))*15)/100;
      console.log($discount);
      discountCustomer.push($discount);
      
      $totalDiscount=0;
      for (var i = 0; i < discountCustomer.length; i++) {
        $totalDiscount += discountCustomer[i] << 0;
      }
      
      $('.totalDiscount').html(($totalDiscount) + ' €');
      
    } else {
      console.log('This seminar has NO discount');
    }
    console.log(discountCustomer);
  }

  $('.buy').click(function(e) {
    addItem(e);
	})
})

.event {
  border: 1px solid black;
  padding: 3px;
  height: 20px;
  width: 400px;
  margin-bottom: 10px;
}

.event > * {
  float: left;
  margin-right: 15px;
}

.total > * {
  float: left;
}

.totalDiscount {
  margin-left: 10px;
}

.clear {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <div class="item">Item 1</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 2</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 3</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
  <p>Total Discount: </p>
  <p class="totalDiscount"></p>
</div>