javascript - jQuery 动态按钮上的加号和减号功能

Question

当按钮和input是动态的时，如何在添加或删除商品数量时单独设置input值？

目前，如果我更改商品的数量，它会更新我不希望发生的所有输入。只想更新我点击的项目的数量值。

var drinks = data.categories.drinks;
        $.each(drinks, function (index, value) {
            $('#drink_list').append(
                '<div class="col-sm-4"> <div class="thumbnail">' +
                '<img src="./assets/imgs/' + value.image + '" alt="..."> <div class="caption">' +
                '<p>' + value.name + ' ' + value.liter + '<span class="pull-right">£' + value.price + '</span></p>' +
                '<p>' + '<button id="qButtonMinus" onclick="minus()">-</button> <input type="text" name="quantity" style="width:30px;" class="value"> <button onclick="add()" id="qButtonAdd">+</button>' +
                '<button class="btn btn-success btn-sm pull-right" onClick="addToCart(\'' + value.name + '\',\'' + value.price + '\')"> Add </button>' + '</p>' +
                '</div> </div> </div>'
            );
        })

add = function () {
    currentQuantity++;
    $('.value').val(currentQuantity)
    console.log('Add > ', currentQuantity)
}

minus = function () {
    if (currentQuantity > 0) {
        currentQuantity--;
    }
    $('.value').val(currentQuantity);
    console.log('Minus > ', currentQuantity)
}

Sample

Answer 1

我更改了以下代码:

add = function(obj) {
  var count = $(obj).siblings('input').val();

  $(obj).siblings('input').val(parseInt(++count))
  var at = $(obj).siblings('button.addToCard');
  var valcount = at.attr("onClick").split(',');
  at.attr("onClick", valcount[0] + "," + valcount[1] + "," + count + ")")
}

minus = function(obj) {
  var count = $(obj).siblings('input').val();

  if (count > 0) {
    $(obj).siblings('input').val(parseInt(count - 1))
    var at = $(obj).siblings('button.addToCard');
    var valcount = at.attr("onClick").split(',');
    at.attr("onClick", valcount[0] + "," + valcount[1] + "," + parseInt(count - 1) + ")")

  }
}

现在您必须将一个对象传递到函数中:onclick="minus(this)" this 获取您单击的对象

更新您的btn函数现在看起来像btn = function(item,price,itemCount)

运行代码，它应该按您想要的方式工作

var json = {
  "categories": {
    "drinks": [{
      "id": "1",
      "name": "Coke",
      "liter": "500ml",
      "price": 1.99,
      "image": ""
    }, {
      "id": "2",
      "name": "Coke Diet",
      "liter": "500ml",
      "price": 1.99,
      "image": "/products/dietcoke-medium.png"
    }, {
      "id": "3",
      "name": "Sprite",
      "liter": "500ml",
      "price": 1.99,
      "image": "/products/sprite-medium.png"
    }, {
      "id": "4",
      "name": "Powerrade",
      "liter": "",
      "price": 3.59,
      "image": "/products/powerade-medium.png"
    }, {
      "id": "5",
      "name": "Pure Life Water",
      "liter": "",
      "price": 1.49,
      "image": "/products/Pure-medium.png"
    }, {
      "id": "6",
      "name": "Refillable Mug",
      "liter": "",
      "price": 2.99,
      "image": "/products/Home-medium.png"
    }],
    "clothes": [{}]
  }
};
var cartItemArr = [];
var cartPriceArr = [];
var currentQuantity = 0;
var allItems = json.categories.drinks;
$.each(allItems, function(index, value) {
  $('#items').append(
    '<div class="col-sm-4"> <div class="thumbnail">' +
    '<img src="./assets/imgs/' + value.image + '" alt="..."> <div class="caption">' +
    '<p>' + value.name + ' ' + value.liter + '<span class="pull-right">£' + value.price + '</span></p>' +
    '<p>' + '<button id="qButtonMinus" onclick="minus(this)">-</button> <input type="text" name="quantity" style="width:30px;" class="value"> <button onclick="add(this)" id="qButtonAdd">+</button>' +
    '<button class="btn btn-success btn-sm pull-right addToCard" onClick="addToCart(\'' + value.name + '\',\'' + value.price + '\',0)"> Add </button>' + '</p>' +
    '</div> </div> </div>'
  );
})

add = function(obj) {
  var count = $(obj).siblings('input').val();

  $(obj).siblings('input').val(parseInt(++count))
  var at = $(obj).siblings('button.addToCard');
  var valcount = at.attr("onClick").split(',');
  at.attr("onClick", valcount[0] + "," + valcount[1] + "," + count + ")")
}

minus = function(obj) {
  var count = $(obj).siblings('input').val();

  if (count > 0) {
    $(obj).siblings('input').val(parseInt(count - 1))
    var at = $(obj).siblings('button.addToCard');
    var valcount = at.attr("onClick").split(',');
    at.attr("onClick", valcount[0] + "," + valcount[1] + "," + parseInt(count - 1) + ")")

  }
}


addToCart = function(item, price, itemCount) {
  console.log(itemCount);
  var itemQuantity = {};
  var item_quantity;
  var quantity;

  var increaseQuantity = 0;
  cartItemArr.push(item);
  cartPriceArr.push(price);

  // Sum up all items
  var totalPrice = 0;
  $.each(cartPriceArr, function() {
    totalPrice += parseFloat(this) || 0;
    $('.total').text(totalPrice.toFixed(2));
  });

  // Item quantity count
  for (var i = 0, j = cartItemArr.length; i < j; i++) {
    if (itemQuantity[cartItemArr[i]]) {
      itemQuantity[cartItemArr[i]]++;
    } else {
      itemQuantity[cartItemArr[i]] = 1;
    }
  }

  for (var drink in itemQuantity) {
    quantity = itemQuantity[drink] + "x ";
  }

  // Render items in virtual receipt
  $('.cart').append(
    '<div class="col-sm-6">' + quantity + item +
    '</div>' +
    '<div class="col-sm-6" style="text-align: right;">' + price +
    '</div>'
  );
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3">
  <div class="cart">
    <h3>Cart</h3>
  </div>
</div>
<div class="col-sm-9">
  <div id="items">

  </div>
</div>