Question

请帮我解决我的问题。下面的代码工作正常，但问题是数据只从第一次迭代中获取。我如何让它适合每个人？提前谢谢，如果问题非常愚蠢，我道歉。

<tbody><tr class="tr_cart_1">
                <input type="hidden" value="1" id="item_id_cart">
                <td data-th="Product">
                    <div class="row">
                        <div class="col-sm-2 hidden-xs"><img
                                src="..." width="100" height="100" alt="..."
                                class="img-responsive" /></div>
                        <div class="col-sm-10">
                            <h4 class="nomargin">...</h4>
                            <p>...</p>
                        </div>
                    </div>
                </td>
                <td data-th="Price"><span id="price_cart">123</span></td>
                <td data-th="Quantity">
                    <form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div>
                        <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

                </td>
                <td data-th="Subtotal" class="text-center">
                    <span class="sum_cart" id="id_sum_cart_1">246</span>
                </td>
                <td class="actions" data-th="">
                    <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
                    <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
                </td>
            </tr><tr class="tr_cart_3">
                <input type="hidden" value="3" id="item_id_cart">
                <td data-th="Product">
                    <div class="row">
                        <div class="col-sm-2 hidden-xs"><img
                                src="..." width="100" height="100" alt="..."
                                class="img-responsive" /></div>
                        <div class="col-sm-10">
                            <h4 class="nomargin">...</h4>
                            <p>...</p>
                        </div>
                    </div>
                </td>
                <td data-th="Price"><span id="price_cart">30</span></td>
                <td data-th="Quantity">
                    <form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                        <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

                </td>
                <td data-th="Subtotal" class="text-center">
                    <span class="sum_cart" id="id_sum_cart_3">60</span>
                </td>
                <td class="actions" data-th="">
                    <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
                    <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
                </td>
            </tr><tr class="tr_cart_2">
                <input type="hidden" value="2" id="item_id_cart">
                <td data-th="Product">
                    <div class="row">
                        <div class="col-sm-2 hidden-xs"><img
                                src="..." width="100" height="100" alt="..."
                                class="img-responsive" /></div>
                        <div class="col-sm-10">
                            <h4 class="nomargin">...</h4>
                            <p></p>
                        </div>
                    </div>
                </td>
                <td data-th="Price"><span id="price_cart">30</span></td>
                <td data-th="Quantity">
                    <form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                        <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

                </td>
                <td data-th="Subtotal" class="text-center">
                    <span class="sum_cart" id="id_sum_cart_2">60</span>
                </td>
                <td class="actions" data-th="">
                    <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
                    <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
                </td>
            </tr></tbody>

$(document).on("click", "#ref_cart_btn", function() {
        $( '[class*="tr_cart_"]' ).each(function(i) {
            var item_id_cart = $("#item_id_cart").attr('value');
            var qty = $("#qty_cart").val();
            alert (qty);
            var price = $("#price_cart").text();
            alert (price);
            alert(item_id_cart);
            $("#id_sum_cart_" + item_id_cart).text(qty*price);
        });
    });

Answer 1

你的错误在HTML中。

当您为多个元素重复相同的ID时，ID是MDN中描述的唯一标识符。

在这种情况下，您需要更改ID，以便它们必须与元素id_sum_cart _

不同

解决问题的一个简单方法是将每个元素放在当前集合中：

＆＃13;

$(document).on("click", "#ref_cart_btn", function() {
  $('tr[class^="tr_cart_"]').each(function(index, element ) {
    var item_id_cart = $(this).find('input[type="hidden"][id="item_id_cart"]').val();
    var qty = $(this).find('input[type="text"][id="qty_cart"]').val();
    var price = $(this).find('span[id="price_cart"]').text();
    alert ('item_id_cart: ' + item_id_cart + ' qty: ' + qty + ' price: ' + price);
    $("#id_sum_cart_" + item_id_cart).text(qty*price);
  });
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<button id="ref_cart_btn">Button</button>
<table>
    <tbody>
    <tr class="tr_cart_1">
        <input type="hidden" value="1" id="item_id_cart">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p>...</p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart">123</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div>
                <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_1">246</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr class="tr_cart_3">
        <input type="hidden" value="3" id="item_id_cart">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p>...</p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart">30</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_3">60</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr class="tr_cart_2">
        <input type="hidden" value="2" id="item_id_cart">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p></p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart">30</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_2">60</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    </tbody>
</table>

＆＃13;

但是，正如我所说，我建议你改变ID：

＆＃13;

$(document).on("click", "#ref_cart_btn", function() {
  $('tr[class^="tr_cart_"]').each(function(index, element ) {
    var item_id_cart = $('#item_id_cart_' + (index + 1)).val();
    var qty = $('#qty_cart_' + (index + 1)).val();
    var price = $('#price_cart_' + (index + 1)).text();
    alert ('item_id_cart: ' + item_id_cart + ' qty: ' + qty + ' price: ' + price);
    $("#id_sum_cart_" + item_id_cart).text(qty*price);
  });
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<button id="ref_cart_btn">Button</button>
<table>
    <tbody>
    <tr class="tr_cart_1">
        <input type="hidden" value="1" id="item_id_cart_1">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p>...</p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart_1">123</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div>
                <input id="qty_cart_1" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_1">246</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr class="tr_cart_3">
        <input type="hidden" value="2" id="item_id_cart_2">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p>...</p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart_2">30</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                <input id="qty_cart_2" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_2">60</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr class="tr_cart_2">
        <input type="hidden" value="3" id="item_id_cart_3">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p></p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart_3">30</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                <input id="qty_cart_3" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_3">60</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    </tbody>
</table>

＆＃13;

jquery .each用于动态多值

1 个答案: