根據單擊的按鈕更改按鈕文本 - 不是所有按鈕

Question

我正在嘗試更改單擊按鈕的文本，在 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();

問題是它更改了其他未單擊按鈕的按鈕文本。

謝謝

Answer 1

您將獲得“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);
          },