Question

我最近在使用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>

所以我有一个问题，我想当我更改计数字段的值时，它们会针对该字段所在的那个产品而改变。现在当我尝试更改第二个产品的计数时，它指的是第一个产品的字段，并且值不变。如果我转到第一个字段，那么在那里一切都很好，我指出了我需要的商品数量，它为我重新计算了价格。但是，为什么当我尝试第二种产品时却失败了？如何解决？

Answer 1

您需要更改此行； 从var count = $('.count').val();到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"
        });
    });

});

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

1 个答案: