Javascript beforesend 函数在所有 "add to cart" 按钮上显示不正确

Question

在我的电子商务网上商店中，我有一个页面，其中一些产品在 table 中逐行列出。在每个产品之后，都会显示一个 "add to cart" 按钮。当访问者单击特定产品的添加到购物车按钮时，相应的 "add to cart" 按钮应在产品有效添加到购物车之前暂时更改为“...正在加载”。我页面上的问题是，当仅单击其中一个按钮时，所有 "add to cart" 按钮都显示“...正在加载”消息（见下图）。

我不知道如何解决这个问题。请在下面找到相应的代码段。我希望有人能指出我正确的方向。但是，产品本身（并且只有该产品）已正确添加到购物车。

谢谢，萨布科

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').button('loading');，它是基于 class 的，将抓取 DOM 中具有此 class 的任何元素。您正在使用 .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

Answer 2

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

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

Javascript beforesend 函数在所有 "add to cart" 按钮上显示不正确

Javascript beforesend function incorrectly displayed on all "add to cart" buttons

html

javascript

php

jquery

opencart