Question

在我的电子商务网上，我有一个页面，其中一些产品在表格中逐行列出。在每个产品之后，有一个＆＃34;添加到购物车＆＃34;按钮显示。当访问者点击特定产品的添加到购物车按钮时，相应的＆＃34;添加到购物车＆＃34;按钮应暂时改变＆＃34; ... loading＆＃34;在产品有效添加到购物车之前。我的页面上的问题是所有＆＃34;添加到购物车＆＃34;按钮显示＆＃34; ... loading＆＃34;单击其中一个按钮时的消息（参见下图）。

我不知道如何解决这个问题。请在下面找到相应的代码。我希望有人能指出我正确的方向。然而，产品本身（仅限此产品）已正确添加到购物车中。

谢谢， SabKo

HTML：

<? $r=($page-1)*20+1; foreach($products AS $product){ ?> 
<tr id="row_<?=$product['product_id']?>">
    <td class="center">
        <input type="hidden" value="<?=$product['product_id']?>" size="2" name="product_id" />
        <input type="hidden" value="<?=$product['gift_products_id']?>" size="2" name="gift_products_id" />
        <? if($product['quantity']!==$product['total']){  ?>
        <select name="quantity" class="form-control_cart" id="input-quantity" value="1" >
             <?php foreach (range(1, $product['quantity'], 1) as $stap) {
                  if ($stap == 1) {
                        echo "<option value='$stap' selected>$stap</option>";
                  } else {
                        echo "<option value='$stap'>$stap</option>";
                  }
                }  ?>
        </select>
        <a class="btn btn-default addtocart" style="margin-top:-4px" lang="<?=$product['product_id']?>" href="javascript:void(0)"  data-toggle="tooltip" title="<?=$_['gr_m_add_to_cart']?>"><i class="fa fa-shopping-cart"></i></a>                       
    </td>
</tr>
<? $r++;} ?>

javascript：

<script type="text/javascript">
  $('.deletelink').click(function(){
    if(confirm('<?=$_['gr_remove_q']?>')){
    return true;
} else {
    return false;
}            
  });
$('.addtocart').click(function() {

id = $(this).attr('lang');

$.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\'], #row_'+id+' select'),
    dataType: 'json',
    beforeSend: function() {
        $('.addtocart').button('loading');
    },
    complete: function() {
        $('.addtocart').button('reset');
    },
    success: function(json) {
        $('.alert, .text-danger').remove();
        $('.form-group').removeClass('has-error');

        if (json['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    var element = $('#input-option' + i.replace('_', '-'));

                    if (element.parent().hasClass('input-group')) {
                        element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    } else {
                        element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    }
                }
            }

            if (json['error']['recurring']) {
                $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
            }

            // Highlight any found errors
            $('.text-danger').parent().addClass('has-error');
        }

        if (json['success']) {
            if (!Journal.showNotification(json['success'], json['image'])) {
                $('.breadcrumb').after('<div class="alert alert-success success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
            }

            $('#cart-total').html(json['total']);

            $('html, body').animate({ scrollTop: 0 }, 'slow');

            $('#cart ul').load('index.php?route=common/cart/info ul li');
        }
    }
});
});
</script>

Answer 1

$('.addtocart')匹配所有按钮。您只需选择他们点击的那个。

$('.addtocart').click(function() {

    var id = $(this).attr('lang');
    var self = $(this);

    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\'], #row_'+id+' select'),
        dataType: 'json',
        beforeSend: function() {
            self.button('loading');
        },
        complete: function() {
            self.button('reset');
        },
        success: function(json) {
            $('.alert, .text-danger').remove();
            $('.form-group').removeClass('has-error');

            if (json['error']) {
                if (json['error']['option']) {
                    for (i in json['error']['option']) {
                        var element = $('#input-option' + i.replace('_', '-'));

                        if (element.parent().hasClass('input-group')) {
                            element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                        } else {
                            element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                        }
                    }
                }

                if (json['error']['recurring']) {
                    $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                }

                // Highlight any found errors
                $('.text-danger').parent().addClass('has-error');
            }

            if (json['success']) {
                if (!Journal.showNotification(json['success'], json['image'])) {
                    $('.breadcrumb').after('<div class="alert alert-success success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                }

                $('#cart-total').html(json['total']);

                $('html, body').animate({ scrollTop: 0 }, 'slow');

                $('#cart ul').load('index.php?route=common/cart/info ul li');
            }
        }
    });
});

Answer 2

您的问题出在您的选择器上。

您正在使用此选择器：

$('.addtocart').button('loading');，它是基于类的，将在DOM中使用此类获取任何元素。您正在使用.click功能。（它已经过时了，不再适用于jquery 3.x.你应该切换到$('.element').on("click, function(){//function});

相反，请使用：

beforeSend: function() {
  $(this).button('loading');
},
complete: function() {
  $(this).button('reset');
},

然而，这样做更简洁：

$('.addtocart').click(function() {
  obj = $(this);
  id = $(this).attr('lang');
//..the rest of your code..
obj.button('load'); //etc

Javascript beforesend功能错误地显示在所有＆＃34;添加到购物车＆＃34;纽扣

2 个答案: