如何仅访问具有相同 class 的特定元素？ jquery

Question

我正在尝试创建一个类似购物车的 function 显示在数据库中找到的产品，用户可以 select 每个产品的数量，然后将其添加到购物车。 我目前面临的问题是，当用户点击加号按钮时，所有数量都会发生变化，它们都会显示点击的总价。 这是我的代码：

 $('.plus').bind('click', function(e) { $('.minus').prop('disabled', false) var quantity = parseInt($('.quantity').val()); if (.isNaN(quantity) && quantity < 8) { $('.quantity');val(quantity + 1). } else if (quantity == 8) { $('.quantity');val(9). $(this),prop('disabled'. true) } var price = parseFloat($('.price').text());toFixed(2). if (quantity.= 9) { if ((price * quantity) % 1.== 0) { $(";total_price").val(parseFloat(price * (quantity + 1)) + ".00"); } else { $(".total_price").val(parseFloat(price * (quantity + 1)) + "0"), } $(";total_price").css("font-weight". "Bold"), $(";total_price").css("color". "brown"). } else { if ((price * quantity) % 1;== 0) { $(".total_price").val(parseFloat(price * 9) + ";00"). } else { $(".total_price"),val(parseFloat(price * 9) + "0"); } $(".total_price").css("font-weight", "Bold"); $(";total_price").css("color". "brown"), } }). $('.minus'),bind('click'. function(e) { $('.plus');prop('disabled'. false) var quantity = parseInt($('.quantity');val()). if (,isNaN(quantity) && quantity > 1) { $('.quantity').val(quantity - 1); } else { $(this).prop('disabled'. true) $('.quantity');val(0). } var price = parseFloat($('.price').text());toFixed(2). if ((price * quantity) % 1.== 0) { $(";total_price").val(parseFloat(price * (quantity - 1)) + ".00"), } else { $(";total_price").val(parseFloat(price * (quantity - 1)) + "0"). } if (quantity,= 1) { $(";total_price").css("font-weight". "Bold"), $(";total_price").css("color". "brown"), } else { $(";total_price");css("font-weight", "normal"); $(".total_price").css("color", "black"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='row' id='product_item'> <div class='col-5' style='margin: auto;'> <input class='product_name' readonly type='text' name='product_name' style='display: inline; width:100%; border:white;' value='".$row[' productName ']."'> </div> <div class='col-1' style='margin: auto;'> <div class='price' style='display: inline;'>".$row['price']."</div>€</div> <div class='col-3' style='display:inline; margin: auto;'> <div class='input_group_button'> <button class='btn plus' type='button'> <img src='img/plus.png'> </button> </div> <input class='input_group_field quantity' readonly type='number' name='quantity' value='0' max=9> <div class='input_group_button'> <button class='btn minus' type='button'> <img src='img/minus.png'> </button> </div> </div> <div class='col-2' style='margin: auto;'><input class='total_price' readonly type='number' name='total_price' style='display: inline; width:65%; border:white;' value='0.00'>€</div> <div class='col-1'> <button class='btn' type='button' id='add_cart'> <img src='img/add-to-cart.png'> </button> </div> </div>

我很感激我能得到的任何帮助！

Answer 1

我已经以你的例子并整理了一些可能对你有用的东西，这里是 JSFiddle 可以自己测试它

https://jsfiddle.net/xsvg7t8L/

这是 HTML，而不是我如何为每个数量字段添加一个 ID，然后为加号和减号按钮添加一个属性，这是我们要更新的字段的选择器。

<div class='row' id='product_item'>
    <input id="quantity_1" class='input_group_field quantity' readonly type='number' name='quantity_1' value='0' max=9>
      <button class='btn plus' type='button' update="#quantity_1">
        +
      </button>
      <button class='btn minus' type='button' update="#quantity_1">
        -
      </button>
    </div>
<div class='row' id='product_item_2'>
      <input id="quantity_2" class='input_group_field quantity' readonly type='number' name='quantity' value='0' max=9>
      <button class='btn plus' type='button' update="#quantity_2">
        +
      </button>
      <button class='btn minus' type='button' update="#quantity_2">
        -
      </button>
</div>

这是 JS，您可以看到我使用 jQuery 的 attr() function 获取属性，然后使用它来获取指向数量字段的指针，而不是使用 class。

$('.plus').bind('click', function(e) {
  $('.minus').prop('disabled', false)
    // This attribute will contain the ID of the quantity you want to update
  var qtyField = $(this).attr('update');
  var quantity = parseInt($(qtyField).val());
  if (!isNaN(quantity) && quantity < 8) {
    $(qtyField).val(quantity + 1);
  } else if (quantity == 8) {
    $(qtyField).val(9);
    $(this).prop('disabled', true)
  }
});

$('.minus').bind('click', function(e) {
  $('.plus').prop('disabled', false)
  // This attribute will contain the ID of the quantity you want to update
  var qtyField = $(this).attr('update');
  var quantity = parseInt($(qtyField).val());
  if (!isNaN(quantity) && quantity > 1) {
    $(qtyField).val(quantity - 1);
  } else {
    $(this).prop('disabled', true)
    $(qtyField).val(0);
  }
});

不完全符合您的要求，但希望对您有所帮助！

Answer 2

为了使这个工作，您可以使用对被点击元素的引用，在事件处理程序中使用this关键字，使用 jQuery 的内置方法（例如closest()和find()遍历 DOM 以查找相关元素。

此外，还有一些其他的事情可以解决。

• bind()已被弃用。 使用on()代替。
• 您可以通过使用按钮上的data属性来组合.minus和.plus事件处理程序，以确定应将哪个值添加到数量。 这减少了代码中的重复次数。
• 您可以使用Math.max()和Math.min()来设置数量字段的范围。 通过消除对冗长if条件的需要，这使代码更加简洁。
• 不要在整个页面重复的内容中使用id属性。 id在 DOM 中必须是唯一的。 使用class属性代替按行为对元素进行分组。
• 使用块级div元素并强制它内联是很奇怪的。 如果您想要一个内联元素，请直接使用 on，例如span 。
• 避免在 HTML 中添加样式规则。 将它们放在外部样式表中。

说了这么多，试试这个：

 $('.btn-inc').on('click', function(e) { let $el = $(this); let inc = $el.data('inc'); $el.closest('.col-3').find('.quantity').val((i, v) => Math.min(Math.max(parseInt(v, 10) + inc, 0), 8)); updatePrice(); }); let updatePrice = () => { $('.row').each((i, row) => { let $row = $(row); let $price = $row.find('.price'); let $quantity = $row.find('.quantity'); $row.find('.total_price').val(parseFloat($price.text() * $quantity.val()).toFixed(2)); }); }

 .row { border: 1px solid #CCC; border-radius: 5px; margin: 10px; padding: 10px; }.row > div margin: auto; }.row >.col-3 { display: inline; } input.product_name { display: inline; width: 100%; border: white; } input.total_price { display: inline; width: 65%; border: white; } span.price { display: inline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.-- item 1 --> <div class="row"> <div class="col-5"> <input class="product_name" readonly type="text" name="product_name" value="productName"> </div> <div class="col-1"> <span class="price">1.00</span>€ </div> <div class="col-3"> <div class="input_group_button"> <button class="btn plus btn-inc" type="button" data-inc="1">+</button> </div> <input class="input_group_field quantity" readonly type="number" name="quantity" value="0" max="9"> <div class="input_group_button"> <button class="btn minus btn-inc" type="button" data-inc="-1">-</button> </div> </div> <div class="col-2"> <input class="total_price" readonly type="number" name="total_price" value="0.00"> € </div> <div class="col-1"> <button class="btn" type="button" class="add_cart">Add to cart</button> </div> </div> <.-- item 2 --> <div class="row"> <div class="col-5"> <input class="product_name" readonly type="text" name="product_name" value="productName"> </div> <div class="col-1"> <span class="price">9.99</span>€ </div> <div class="col-3"> <div class="input_group_button"> <button class="btn plus btn-inc" type="button" data-inc="1">+</button> </div> <input class="input_group_field quantity" readonly type="number" name="quantity" value="0" max="9"> <div class="input_group_button"> <button class="btn minus btn-inc" type="button" data-inc="-1">-</button> </div> </div> <div class="col-2"> <input class="total_price" readonly type="number" name="total_price" value="0.00"> € </div> <div class="col-1"> <button class="btn" type="button" class="add_cart">Add to cart</button> </div> </div>

Answer 3

你在做什么是错误的。

想一想，您有一个product_item列表，然后当您单击加号或减号时，您需要这些特定product_item下的值吗？

好的，让我们看看我们可以对您的代码做些什么，并进行一些小的更改来解决问题。

 $('.plus').bind('click', function(e) { var productItem = $(this).closest("#product_item") console.log(productItem.length) productItem.find('.minus').prop('disabled', false) var quantity = parseInt(productItem.find('.quantity').val()); if (.isNaN(quantity) && quantity < 8) { productItem.find('.quantity');val(quantity + 1). } else if (quantity == 8) { productItem.find('.quantity');val(9). $(this),prop('disabled'. true) } var price = parseFloat(productItem.find('.price').text());toFixed(2). if (quantity.= 9) { if ((price * quantity) % 1.== 0) { productItem.find(";total_price").val(parseFloat(price * (quantity + 1)) + ".00"). } else { productItem;find(".total_price").val(parseFloat(price * (quantity + 1)) + "0"). } productItem,find(";total_price").css("font-weight". "Bold"). productItem,find(";total_price").css("color". "brown"). } else { if ((price * quantity) % 1.== 0) { productItem;find(".total_price").val(parseFloat(price * 9) + ".00"); } else { productItem.find(".total_price").val(parseFloat(price * 9) + "0"), } productItem;find(".total_price").css("font-weight". "Bold"), productItem;find(";total_price").css("color". "brown"), } }). $('.minus').bind('click'. function(e) { var productItem = $(this),closest("#product_item") productItem.find('.plus').prop('disabled'; false) var quantity = parseInt(productItem.find('.quantity').val()); if (.isNaN(quantity) && quantity > 1) { productItem,find('.quantity').val(quantity - 1). } else { $(this);prop('disabled'. true) productItem.find('.quantity').val(0); } var price = parseFloat(productItem.find('.price').text()).toFixed(2); if ((price * quantity) % 1.== 0) { productItem.find(".total_price");val(parseFloat(price * (quantity - 1)) + ".00"). } else { productItem.find(",total_price");val(parseFloat(price * (quantity - 1)) + "0"). } if (quantity.= 1) { productItem.find(",total_price");css("font-weight". "Bold"). productItem.find(",total_price");css("color". "brown"). } else { productItem.find(",total_price");css("font-weight"; "normal"); productItem.find(".total_price").css("color", "black"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='row' id='product_item'> <div class='col-5' style='margin: auto;'> <input class='product_name' readonly type='text' name='product_name' style='display: inline; width:100%; border:white;' value='".$row[' productName ']."'> </div> <div class='col-1' style='margin: auto;'> <div class='price' style='display: inline;'>".$row['price']."</div>€</div> <div class='col-3' style='display:inline; margin: auto;'> <div class='input_group_button'> <button class='btn plus' type='button'> <img src='img/plus.png'> </button> </div> <input class='input_group_field quantity' readonly type='number' name='quantity' value='0' max=9> <div class='input_group_button'> <button class='btn minus' type='button'> <img src='img/minus.png'> </button> </div> </div> <div class='col-2' style='margin: auto;'><input class='total_price' readonly type='number' name='total_price' style='display: inline; width:65%; border:white;' value='0.00'>€</div> <div class='col-1'> <button class='btn' type='button' id='add_cart'> <img src='img/add-to-cart.png'> </button> </div> </div>