Javascript 为什么在引用第二个字段时，值取自第一个字段？

我最近在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"
    });
});
});

jQuery（文档）.ready（函数（）{
$（'.count'）。在（'blur'，函数getTotalPrice（）上{
var name=$（'#name'）.html（）；
var count=$（'.count'）.val（）；
$.ajax({
键入：“获取”，
网址：“购物车”，
数据：“name=“+name+”&count=“+count，
成功：功能（数据）{
$（“#总价”）.text（“总价：+data['totalPrice'].toFixed（2））.wrap（“”）；
$（“#productCount”）.text（“+数据['productCount']+”）；
$。每个（[数据['cartItems']]，函数（键，值）{
});
},
数据类型：“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>

项目
名称
类别
公司制造商
数量
价格
总价
总价：${totalPrice}

我填写时的页面：

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

项目
名称
类别
公司制造商
数量
价格
总价

---

所以我有一个问题，我希望当我改变值时​​对于“计数”字段，它们针对与此字段相对的产品进行更改。现在，当我尝试更改第二个乘积中的计数时，它指的是第一个乘积的字段和值​​不要改变。如果我转到第一个字段，那么那里一切都很好，我指出了我需要的货物数量，它为我重新计算了价格。但是为什么我在尝试为第二个产品这样做时失败了呢？如何修复？

您需要更改此行

var count=$（'.count'）.val（）

to

var count=$（this.val（）

由于.count似乎有很多实例，因此必须使用$（this）引用当前选定的元素

对于名称，有点棘手，您必须找到最近的.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"
        });
    });

});

jQuery（文档）.ready（函数（）{
$（'.count'）。在（'blur'，函数getTotalPrice（）上{
//更新
var name=$（this.parent（）.parent（）.find（'.name'）.html（）；
//更新
var count=$（this.val（）；
$.ajax({
键入：“获取”，
网址：“购物车”，
数据：“name=“+name+”&count=“+count，
成功：功能（数据）{
$（“#总价”）.text（“总价：+data['totalPrice'].toFixed（2））.wrap（“”）；
$（“#productCount”）.text（“+数据['productCount']+”）；
$。每个（[数据['cartItems']]，函数（键，值）{
});
},
数据类型：“json”
});
});
});
谢谢，这就是工作。那名字呢？我还试图获取名称，但它不起作用，为什么？嗨@Mefisto\u我更新了答案，您需要使用一些jquery函数导航到.name。父项（）和.find（）。我更新了答案。