正确使用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

您应该将bmd-form-group is-focused传递给<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous"> <div class="bmd-form-group is-focused"> <label class="form-control-label question" for="answer-1">What is 5+5?</label> <input class="answer form-control is-valid" id="answer-1" type="text" name="answer-1" value="10"> </div>函数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);
	})
})

Answer 2

你没有捕获click事件，我做了一些小修改来捕获它（并将当前元素传递给addItem函数）...希望它有所帮助！

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

  function addItem($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) {
  var $event = $(e.target).closest('.event');
    addItem($event);
	})
})

.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>