为什么引用第二个字段时，值取自第一个字段？
为什么引用第二个字段时，值取自第一个字段？
提问于 2018-10-22 01:26:24
我最近使用了jquery。我有一个问题。我通过forEach向页面添加元素，并且我需要访问jquery中特定产品的字段。
我的JQuery：
jQuery(document).ready(function() {
$('.count').on('blur', function getTotalPrice(){
var name = $('#name').html();
var count = $('.count').val();
$.ajax({
type: "GET",
url: "cart",
data: "name=" + name + "&count=" + count,
success: function(data){
$("#totalPrice").text("Total price: " + data['totalPrice'].toFixed(2)).wrap("<h4></h4>");
$("#productCount").text("(" + data['productCount'] + ")");
$.each([data['cartItems']], function(key, value) {
});
},
dataType: "json"
});
});
});我的页面：
<table>
<tr>
<th>Item</th>
<th>Name</th>
<th>Category</th>
<th>Company Manufacturer</th>
<th>QTY</th>
<th>Prices</th>
<th>Total Prices</th>
</tr>
<c:forEach items="${cartItems}" var="items">
<tr>
<td><a href="images/product/${items.key.imageName}"><img src="images/product/${items.key.imageName}" width=100></td>
<td><span id="name">${items.key.name}</span></td>
<td>${items.key.category.name}</td>
<td>${items.key.manufacturer.name}</td>
<td><input type="text" class="count" value="${items.value}"></td>
<td>${items.key.price}</td>
<td><span id="totalPriceForOne">${items.key.price * items.value}</span></td>
<td><a href="removeItemFromCart?name=${items.key.name}">Remove item</a></td>
</tr>
</c:forEach>
</table>
</div>
<div align="right" style="color: #0087ff">
<span id="totalPrice"><h4>Total price: ${totalPrice}</h4></span>
</div>
<div align="right"><a href="order.jsp" class="to-buy">Make order</a></div>我填写时的页面：
<table>
<tr>
<th>Item</th>
<th>Name</th>
<th>Category</th>
<th>Company Manufacturer</th>
<th>QTY</th>
<th>Prices</th>
<th>Total Prices</th>
</tr>
<tr>
<td><a href="images/product/3.png"><img src="images/product/3.png" width=100></td>
<td><span class="name">ALLIANCE_SUNGLASSES</span></td>
<td>accessories</td>
<td>Luis Vuitton</td>
<td><input type="text" class="count" value="1"></td> //сюда обращается
<td>810.00</td>
<td><span id="totalPriceForOne">810.00</span></td>
<td><a href="removeItemFromCart?name=ALLIANCE_SUNGLASSES">Remove item</a></td>
</tr>
<tr>
<td><a href="images/product/2.png"><img src="images/product/2.png" width=100></td>
<td><span class="name">45DAVID</span></td>
<td>jeans</td>
<td>Collins</td>
<td><input type="text" class="count" value="12"></td> //сюда обратиться не выходит
<td>100.00</td>
<td><span id="totalPriceForOne">1200.00</span></td>
<td><a href="removeItemFromCart?name=45DAVID">Remove item</a></td>
</tr>
</table>所以我有一个问题，我希望当我更改count字段的值时，它们对于该字段所在的产品也会发生变化。现在，当我尝试更改第二个产品中的计数时，它引用了第一个产品的字段，而值没有更改。如果我转到第一个字段，那么在那里一切都很好，我指出了我需要的商品数量，它为我重新说明了价格。但是，当我尝试为第二个产品执行此操作时，为什么会失败？如何修复它？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-22 01:38:35
您需要更改此行；将 var count = $('.count').val();更改为var count = $(this).val();
由于似乎有许多此元素的实例，因此必须使用$( .count )引用当前选定的元素。
对于名称，它有点棘手，您必须找到最近的.name。由于.count位于td内，因此您必须使用.parent() 才能导航到td。进入td后，必须再次使用.parent()导航到tr。在tr中，您需要使用.find(".name")来查找具有类名的子级。
jQuery(document).ready(function() {
$('.count').on('blur', function getTotalPrice(){
// updated
var name = $(this).parent().parent().find('.name').html();
// updated
var count = $(this).val();
$.ajax({
type: "GET",
url: "cart",
data: "name=" + name + "&count=" + count,
success: function(data){
$("#totalPrice").text("Total price: " + data['totalPrice'].toFixed(2)).wrap("<h4></h4>");
$("#productCount").text("(" + data['productCount'] + ")");
$.each([data['cartItems']], function(key, value) {
});
},
dataType: "json"
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52917990
复制相关文章
相似问题