1

我正在市场应用程序上建立结帐。我需要能够在结帐时增加、减少和删除项目，但是当有多个项目时，AJAX 事件 jQuery 只会在 AJAx 事件触发时拾取第一个 item_id，无论用户点击什么项目，我该如何解决这个问题?

这是 PHP/HTML 代码...

        <?php
            $total      = 0;
            $subtotal   = 0;
            foreach($items as $item):
                $subtotal   += $item['product_price']*$item['product_qty'];
        ?>
        <tbody id="item_<?=$item['cart_item_id']?>">
            <tr>
                <td>
                    <img src="<?=$item['product_image']?>">
                    <?php if($item['brand_name']!='None'): ?>
                    <p style="color: #666;"><?=$item['brand_name']?></p>
                    <?php endif; ?>
                    <p style="font-size: 16px;"><?=$item['product_name']?></p>
                    <a href="#" id="remove-item-button" >Remove this item</a> <!--HERE-->
                </td>
                <td class="align-td-center">
                    <?=formatted_price($item['product_price'])?>
                </td>
                <td class="align-td-center">
                    <a href="#" id="qty-inc-button" >More</a><?=$item['product_qty']?><a                  href="#" id="qty-dec-button">Less</a><!--AND HERE-->
                    <input type="hidden" id="item_id" value="<?=$item['cart_item_id']?>">
                </td>
                <td class="align-td-center">
                    <span id="value-shipping-<?=$item['cart_item_id']?>"><?=formatted_price($item['product_price']*$item['product_qty'])?></span>
                </td>
            </tr>
        </tbody>

这是我的 jQ/AJAX ......

    $('a#qty-inc-button').click(function(){

        $("#processing").fadeIn("fast");
        $.ajax({
            url: "<?=BASE_URL?>landing/inc_cart_item",
            type: "post",
            dataType: "json",
            data: {inc:1, item_id: $('#item_id').val(),},
            success: function(data){
                $("#processing").fadeOut("fast");
                if(data.error) {
                    alert(data.error);
                } else {
                   // parent.$('#line1').text(data.line1);
                    //parent.$('#line2').text(data.line2);
                    //parent.$('#address-dialog').dialog('close');
                    alert(data.line1);
                }
            }
        });
        return false;           
});

$('a#qty-dec-button').click(function(){

    $("#processing").fadeIn("fast");
    $.ajax({
        url: "<?=BASE_URL?>landing/dec_cart_item",
        type: "post",
        dataType: "json",
        data: {dec:0, item_id: $('#item_id').val(),},
        success: function(data){
            $("#processing").fadeOut("fast");
            if(data.error) {
                alert(data.error);
            } else {
                //parent.$('#line1').text(data.line1);
                //parent.$('#line2').text(data.line2);
                //parent.$('#address-dialog').dialog('close');
                alert(data.line1);
            }
        }
    });
    return false;           
});

$('a#remove-item-button').click(function(){

    $("#processing").fadeIn("fast");
    $.ajax({
        url: "<?=BASE_URL?>landing/rem_cart_item",
        type: "post",
        dataType: "json",
        data: {item_id: $('#item_id').val(),},
        success: function(data){
            $("#processing").fadeOut("fast");
            if(data.error) {
                alert(data.error);
            } else {
                //parent.$('#line1').text(data.line1);
                //parent.$('#line2').text(data.line2);
                //parent.$('#address-dialog').dialog('close');
                alert(data.line1);
            }
        }
    });
    return false;           
});

感谢所有帮助并感谢您的关注。

4

3 回答 3

4

id 是页面上的唯一标识符。http://css-tricks.com/the-difference-between-id-and-class/

因此，JQuery 在找到第一次出现的#qty-inc-button.

有很多方法可以实现您想要实现的目标。您应该创建qty-inc-button一个类名以及在页面上多次出现的任何 id。那你可以试试

$('a.qty-inc-button').click(function(){
    $(this).DoSomething();  // where $(this) is the 'a.qty-inc-button' that the user clicked on.

    // you can do:
    $(this).children(".aChildClass").hide();

    // you can do:
    $(this).find( 'someElement' ).css( 'background-color', 'red' ); //etc, etc
});

但是，在我非常谦虚的意见中，您应该在尝试这种口径的东西之前了解更多关于 HTML 属性和 JQuery 遍历的信息。否则，你会一直磕磕绊绊。

于 2013-09-20T12:44:46.213 回答
1

尝试将 ID 更改为类，修改选择器以查找父 table_item 的子对象阅读关于 id 和类的区别。

于 2013-09-20T12:48:09.117 回答
0

在与客户和 PM 交谈并尝试遍历之后，这就是答案......

onClick="remItem(<?=$item['cart_item_id']?>)"

在相关的锚标签中，它是不整洁的，但时间对我们不利。谢谢大家。

于 2013-09-20T15:07:07.020 回答