0

我正在尝试更改单击的按钮的文本，在 ajax 函数中使用 beforeSend 和 Complete，将文本从添加到购物车 > 添加... > 添加到购物车更改，但所有按钮中的文本都已更改，不知道如何以单击的按钮为目标。

HTML - 按钮文本包含在具有数据属性的空间中

<span class="js-btn-cta" data-addbtn="{{ btn_txt }}" data-soldout="{{ btn_txt_soldout }}" data-offerbtn="{{ btn_txt_selling }}" data-adding-cart="{{ btn_adding }}" data-added-cart="{{ btn_added }}">

JS - 然后我在发送请求之前更改文本，一旦完成，使用以下方法；

  //START AJAX API ADD TO CART FUNCTION
    let miniCartContentsSelector = '.js-mini-cart-contents';
    let addingCartBtn = $('.add-to-cart-button');
    let addingCartText = $('.js-btn-cta');

    let ajaxify = {
      onAddToCart: function(event){
        event.preventDefault();
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data: $(this).serialize(),
          dataType: 'json',
          beforeSend: function(e) {
            //Update btn text on product and collection pages
            dataAddingCart = addingCartText.attr('data-adding-cart'),
            addingCartText.text(dataAddingCart);
          },
          complete: function(e) {
            //Update btn text on product and collection pages
            dataAddedCart = addingCartText.attr('data-added-cart'),
            addingCartText.text(dataAddedCart);
          },
          success: function(){
            ajaxify.onCartUpdated();
            currencyPicker.setCurrencyText();
          },
          error: ajaxify.onError
        });
        shippingBar.update();
      },
      onCartUpdated: function() {
        $.ajax({
          type: 'GET',
          url: '/cart',
          context: document.body,
          success: function(context){
            let
              $dataCartContents = $(context).find('.js-cart-page-contents'),
              $dataCartContentsPrice = $(context).find('.js-total'),
              dataCartHtml = $dataCartContents.html(),
              dataCartItemCount = $dataCartContents.attr('data-cart-item-count'),
              dataCartItemTotal = $dataCartContentsPrice.attr('data-cart-item-total'),
              $miniCartContents = $(miniCartContentsSelector),
              $cartItemCount = $('.js-cart-item-count'),
              $closeIcon = $('.js-close-cart'),
              $cartItemTotal = $('.js-cart-item-total');

            $cartItemCount.text(dataCartItemCount);
            $cartItemTotal.html('<span class="money">' + dataCartItemTotal + '</span>');
            $miniCartContents.html(dataCartHtml);

            //change currency in cart when changed
            currencyPicker.setCurrencyText();
            Currency.convertAll(shopCurrency, Currency.currentCurrency);

            if (parseInt(dataCartItemCount) > 0){
              ajaxify.openCart();
              $('.js-minus').prop("disabled", true);
            }
            else {
              ajaxify.closeCart();
            }
            //close the cart drawer when clicking on x in cart header
            function closeClick(event){
              $('body').removeClass('show-sidebar');
              console.log('close icon btn clicked');
            }
            //end close the cart drawer when clicking on x in cart header
            //call the closeClick function
            $('.js-close-cart').click(closeClick);
            //end call the closeClick function
          }
        });
        //reset pdp qty value to 1 once add to cart has been clicked
        $(".js-quantity-field-pdp").val("1");
        shippingBar.update();
        ajaxify.closeModal();
      },
      onError: function(XMLHttpRequest, textStatus){
        let data = XMLHttpRequest.responseJSON;
        alert(data.status + ' - ' + data.message + ': ' + data.description);
      },
      openCart: function(){
        let isInCartPage = window.location.href.indexOf('/cart') === -1;
        if(isInCartPage) {
          $('body').addClass('show-sidebar');
        }
      },
      closeCart: function(){
        $('body').removeClass('show-sidebar');
      },
      closeModal: function(){
        $('.modal').modal('hide');
        $('.modal-backdrop').modal('hide');
      },
      onCartButtonClick: function(event){
        event.preventDefault();
        //If the body has a class of show-sidebar, return TRUE.
        let isCartOpen = $('body').hasClass('show-sidebar');
        let isInCart = window.location.href.indexOf('/cart') === -1;

        if(!isInCart) {
          if(!isCartOpen) {
            ajaxify.openCart();
          }
          else {
            ajaxify.closeCart();
          }
        }
      },
      init: function(){
        $(document).on('submit', addToCartFormSelector, ajaxify.onAddToCart);
        $(document).on('click', '.js-menu-toggle active', ajaxify.onCartButtonClick);
        $(document).on('click', '#mini-cart .js-keep-shopping', ajaxify.onCartButtonClick);
      }
    };
    //initiate the function
    ajaxify.init();

问题是它更改了其他未单击按钮的按钮文本。

谢谢

4

1 回答 1

0

您将获得所有具有类“js-btn-cta”的按钮，并将文本属性更改为具有此类的所有按钮。不仅是操作按钮。

在 onAddToCart 中，您必须获得单击的按钮。

onAddToCart: function(event){
        var clickedButton = $(this);
        event.preventDefault();
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data: $(this).serialize(),
          dataType: 'json',
          beforeSend: function(e) {
            //Update btn text on product and collection pages
            dataAddingCart = clickedButton.attr('data-adding-cart'),
            clickedButton.text(dataAddingCart);
          },
          complete: function(e) {
            //Update btn text on product and collection pages
            dataAddedCart = clickedButton.attr('data-added-cart'),
            clickedButton.text(dataAddedCart);
          },
于 2021-10-25T14:20:44.223 回答