Question

我正在做某种商业项目，在购物车页面中，我将显示用户选择的产品。

代码如下：

<div class="container-table-cart pos-relative">
        <div class="wrap-table-shopping-cart bgwhite">
            <table class="table-shopping-cart">
                <tr class="table-head">
                    <th class="column-1"></th>
                    <th class="column-2">Prodotto</th>
                    <th class="column-3">Prezzo</th>
                    <th class="column-4 p-l-70">Quantità</th>
                    <th class="column-5">Totale</th>
                </tr>


                <?php
                $subtotal = (float)0;
                $priceConsegna = (float)1.50;
                $total = (float)0;
                if (!($showcart)) {
                    echo '<button onclick="logInRedirect()" class="flex-c-m size2 bg1 bo-rad-23 hov1 s-text1 trans-0-4">
                Accedi Per Ordinare
                </button>';

                } else {
                    //echo "goodbye";
                    $orderArray = array();
                    $orderArray = $arrayValues;
                    foreach ($orderArray as $value) {
                        $productQty = $value;
                        $productName = key($orderArray);
                        $productImage = getImageFromName($productName);
                        $productPrice = getPriceFromName($productName);

                        // Formatting Price
                        $totalPrice = $productQty * $productPrice;
                        //echo $totalPrice;
                        $subtotal += $totalPrice;
                        //echo $subtotal;


                        ?>

                        <tr id="" class="table-row">
                            <td class="column-1">
                                <div class="cart-img-product b-rad-4 o-f-hidden">
                                    <img src="pizze/<?php echo $productImage; ?>" alt="IMG-PRODUCT">
                                </div>
                            </td>
                            <td id="product-name" class="column-2"><?php echo $productName; ?> </td>
                            <td class="column-3"><?php echo formatPrice($productPrice); ?></td>
                            <td class="column-4">
                                <div class="flex-w bo5 of-hidden w-size17">
                                    <button onclick="manageQty('DwnProd')" class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                                        <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                                    </button>

                                    <input id="productQty" class="size8 m-text18 t-center num-product" type="number"
                                           name="num-product1" value="<?php echo $productQty; ?>">

                                    <button onclick="manageQty('UpProd')" class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                                        <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </td>
                            <td class="column-5">
                                <?php
                                echo formatPrice(number_format((float)$totalPrice, 2, '.', ''));
                                ?>
                            </td>
                        </tr>
                        <?php
                        next($orderArray);

                    }
                }

                ?>



            </table>
        </div>
    </div>

现在，我正在让用户修改单个产品的数量，我正在使用JS，这是代码：

    function manageQty(key){
    var number = $('#productQty');
    var name = $('#product-name')
    number.val().replace(/\n/g, '');
    number.val().replace(/\t/g, '');
    name.text().replace(/\n/g, '');
    name.text().replace(/\t/g, '');

    $.ajax({
        url: 'ajax.php',
        method: 'POST',
        dataType: 'text',
        data:{
            key: key,
            name: name.text(),
            qty: number.val()
        }, success: function (response) {
            console.log(response);
            setCookie('phpcart', response,7);
            UpdatetotalSub();
        }

    })

}

这里的问题是，当我按btn-product Up或btn-product-down时，我总是修改表的第一个元素……而不是我要修改的那个元素！

我的理解是我在js方面做错了事。

让我知道是否有一个“简单的解决方案”谢谢

Answer 1

我会使用：

而不是使用onClick属性

<button data-val="UpProd" id="myProdBtnn" class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                                </button>

JS：

    $('#myProdBtnn').on('click',function(){

var key=$(this).attr('data-val');
var number = $(this).closest('input [id="productQty"]'); //change this
    var name = $(this).closest('td[id="product-name"]'); //change this
    number.val().replace(/\n/g, '');
    number.val().replace(/\t/g, '');
    name.text().replace(/\n/g, '');
    name.text().replace(/\t/g, '');

    $.ajax({
        url: 'ajax.php',
        method: 'POST',
        dataType: 'text',
        data:{
            key: key,
            name: name.text(),
            qty: number.val()
        }, success: function (response) {
            console.log(response);
            setCookie('phpcart', response,7);
            UpdatetotalSub();
        }

    })




})

如何使用Js从PHP动态生成的表中检索信息

1 个答案: