如何只访问具有相同类的特定元素?jquery

Question

我试图创建一个类似购物车的功能，显示在数据库中找到的产品，用户可以选择每个产品的数量，然后将其添加到购物车中。我目前面临的问题是，当用户点击一个加号按钮，所有的数量改变，他们都显示点击总价。这是我的代码:

$('.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()函数获得属性，然后使用它来获得指向数量字段的指针，而不是使用类。

$('.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关键字，遍历DOM以使用jQuery的内置方法(如closest()和find())查找相关元素。

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

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