Ajax / php如何识别单个通用字段？

Question

I'm building a checkout on a marketplace application. I need to be able to increment, decrement and remove items at the checkout but when there is multpile items the AJAX event jQuery only picks up the first item_id when the AJAx event fires no mater what item a user clicks on, how can I fix this?

Here's the PHP/HTML code...

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

And here's my 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;           
});

All help appreciated and thanks for looking.

Answer 1

An id is meant to be an unique identifier on a page. http://css-tricks.com/the-difference-between-id-and-class/

So, JQuery stops searching as soon as it finds the first occurrence of #qty-inc-button.

There are many ways to do what you are trying to acheive. You should make qty-inc-button a class name along with any id that appears multiple times on a page. Then you can try

$('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
});

However, in my very humble opinion you should learn more about HTML attributes and JQuery traversal before trying things of this caliber. Otherwise, you'll keep stumbling.