1

マーケットプレイス アプリケーションでチェックアウトを構築しています。チェックアウト時にアイテムをインクリメント、デクリメント、および削除できるようにする必要がありますが、複数のアイテムがある場合、ユーザーがクリックしたアイテムに関係なく AJAx イベントが発生したときに、AJAX イベント jQuery は最初の 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 に答える