计数器向上/向下计数取决于您推动哪一侧

Question

我最初拥有这些产品计数器，所以当你单击带有.btn类的元素时，计数器会上升，但是如果需要的话它们将无法恢复原状。我想要它，以便如果他们点击.add-one类的元素，计数器将上升一个。如果他们点击.remove-one，则相反。

＆＃13;

＆＃13;

$(document).ready(function() {
  var count = 0;

  $(".btn").each(function() {

    $(this).click(function() {
      // var thisProductPrice = parseFloat($(this).find($('.product-price-original')).text()),
      // 	count = parseInt($(this).find('.product-counter').text()) + 1,
      // 	newPrice = (thisProductPrice * count).toFixed(2);

      $(".add-one").click(function() {
        var thisProductPrice = parseFloat($(this).find($('.product-price-original')).text()),
          count = parseInt($(this).find('.product-counter').text()) + 1,
          newPrice = (thisProductPrice * count).toFixed(2);

        $(this).siblings($('.product-counter')).text(count),
          $(this).siblings($('.product-price')).text(newPrice)
      });
      $(".remove-one").click(function() {
        var thisProductPrice = parseFloat($(this).find($('.product-price-original')).text()),
          count = parseInt($(this).find('.product-counter').text()) - 1,
          newPrice = (thisProductPrice * count).toFixed(2);

        $(this).siblings($('.product-counter')).text(count),
          $(this).siblings($('.product-price')).text(newPrice)
      });
      $(this).addClass("locked");
    });
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">
  <div class="btn">
    <div class="remove-one">-</div>
    <span class="product-btn size">S: $</span>
    <div class="product-price">9.95</div>
    <span class="counter">(<div class="product-counter">0</div>)</span>
    <div class="product-price-original">9.95</div>
    <div class="add-one">+</div>
  </div>
  <div class="btn">
    <div class="remove-one">-</div>
    <span class="product-btn size">M: $</span>
    <div class="product-price">11.95</div>
    <span class="counter">(<div class="product-counter">0</div>)</span>
    <div class="product-price-original">11.95</div>
    <div class="add-one">+</div>
  </div>
  <div class="btn">
    <div class="remove-one">-</div>
    <span class="product-btn size">L: $</span>
    <div class="product-price">14.95</div>
    <span class="counter">(<div class="product-counter">0</div>)</span>
    <div class="product-price-original">14.95</div>
    <div class="add-one">+</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.add-one和.remove-one元素没有子元素，因此.find()将无效。

您应该使用.btn / .closest()遍历父.parent()元素，然后使用.find()定位所需的元素。

var btn = $(this).closest('.btn'); //Target parent
var thisProductPrice = parseFloat(btn.find('.product-price-original').text()), //target desired element

您应该直接使用按钮附加事件处理程序，而不需要.each()

＆＃13;

＆＃13;

$(document).ready(function() {
  var count = 0;

  $(".add-one").click(function() {
    var btn = $(this).closest('.btn');
    var thisProductPrice = parseFloat(btn.find('.product-price-original').text()),
      count = parseInt(btn.find('.product-counter').text()) + 1,
      newPrice = (thisProductPrice * count).toFixed(2);

    btn.find('.product-counter').text(count);
    btn.find('.product-price').text(newPrice);
  });

  $(".remove-one").click(function() {
    var btn = $(this).closest('.btn');
    var thisProductPrice = parseFloat(btn.find('.product-price-original').text()),
      count = parseInt(btn.find('.product-counter').text()) - 1,
      newPrice = (thisProductPrice * count).toFixed(2);

    btn.find('.product-counter').text(count);
    btn.find('.product-price').text(newPrice);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="btn">
    <div class="remove-one">-</div>
    <span class="product-btn size">S: $</span>
    <div class="product-price">9.95</div>
    <span class="counter">(<div class="product-counter">0</div>)</span>
    <div class="product-price-original">9.95</div>
    <div class="add-one">+</div>
  </div>
  <div class="btn">
    <div class="remove-one">-</div>
    <span class="product-btn size">M: $</span>
    <div class="product-price">11.95</div>
    <span class="counter">(<div class="product-counter">0</div>)</span>
    <div class="product-price-original">11.95</div>
    <div class="add-one">+</div>
  </div>
  <div class="btn">
    <div class="remove-one">-</div>
    <span class="product-btn size">L: $</span>
    <div class="product-price">14.95</div>
    <span class="counter">(<div class="product-counter">0</div>)</span>
    <div class="product-price-original">14.95</div>
    <div class="add-one">+</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;