Ajax加购时修改按钮文本误改所有按钮的问题如何解决

你在代码最开头定义的addingCartText = $('.js-btn-cta')是选中了页面内所有携带js-btn-cta类的元素，所以修改文本的时候会批量更新所有按钮，没有精准定位到当前触发提交事件的表单对应的按钮。

步骤1：删除全局的按钮元素声明 #

删掉最开头的这两行全局声明，避免全局选中所有按钮：

let addingCartBtn = $('.add-to-cart-button');
let addingCartText = $('.js-btn-cta');

步骤2：在提交事件触发时获取当前表单对应的目标按钮 #

在onAddToCart回调内，通过当前触发事件的表单（也就是this指向的提交表单），查找它内部对应的.js-btn-cta元素，这样拿到的就是被点击的那个按钮对应的文本标签：

onAddToCart: function(event){
  event.preventDefault();
  // 新增：获取当前提交表单对应的按钮文本元素
  const $currentBtnText = $(this).find('.js-btn-cta');
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: $(this).serialize(),
    dataType: 'json',
    beforeSend: function(e) {
      // 直接用当前按钮的data属性修改文本
      $currentBtnText.text($currentBtnText.data('adding-cart'));
    },
    complete: function(e) {
      $currentBtnText.text($currentBtnText.data('added-cart'));
      // 可选：如果需要几秒后恢复默认加购文本，可以取消注释下方代码
      // setTimeout(() => {
      //   $currentBtnText.text($currentBtnText.data('addbtn'));
      // }, 2000);
    },
    success: function(){
      ajaxify.onCartUpdated();
      currencyPicker.setCurrencyText();
    },
    error: ajaxify.onError
  });
  shippingBar.update();
},

如果你的按钮不在表单内部，而是和表单为同级/其他层级关系，可以根据你的实际DOM结构调整查找逻辑，比如用$(this).prev('.js-btn-cta')或者$(this).closest('.product-card').find('.js-btn-cta')这类方式，只要能定位到当前商品模块对应的按钮即可。

内容的提问来源于stack exchange，提问作者Whiley Mai