Question

我不确定如何完全解释这一点，但我希望这是有道理的。

我有一个功能，我已经制作了一个功能，当篮子价值总额达到一定的阈值时，计算剩余的花费资格以获得免费送货。

每次将产品添加到购物篮时，都会使用AJAX更新购物篮价值。

添加到购物篮按钮出现在AJAX生成的模式中。

我需要在每次页面刷新时调用我的函数，并且每次在产生AJAX生成的添加到购物篮按钮时将产品添加到购物篮时都需要调用该函数。我试着用下面的方法来做所有这些，但它似乎没有正常工作。其中一个问题是，当点击添加到篮子按钮时事件会多次触发，而另一个问题是在事件发生后更新篮子总数，因此总数未正确计算。

任何人都可以解释我如何整理这一切吗？

function totalBag() {
   var standardDeliveryLow = 49.99;
   var standardDeliveryHigh = 64.99;
   var expressDeliveryLow = 65.00;
   var expressDeliveryHigh = 99.99;
   var bagValue = $('#basket-value').text();
   var bagTotal = Number(bagValue.replace(/[^0-9\.-]+/g,""));

   if (bagTotal >= standardDeliveryLow && bagTotal <= standardDeliveryHigh) {
       var standardDifference = parseFloat(Math.round((standardDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
       $('<div class="delivery-message"><p>£'+ standardDifference +' from standar delivery</p></div>').insertAfter('.breadcrumbs');
   } else if (bagTotal >= expressDeliveryLow && bagTotal <= expressDeliveryHigh) {
      var expressDifference = parseFloat(Math.round((expressDeliveryHigh - bagTotal) * 100) / 100).toFixed(2); 
      $('<div class="delivery-message"><p>£'+ expressDifference + ' from express delivery</p></div>').insertAfter('.breadcrumbs');
   } else {
     return false;
   }
}

$(document).on('ajaxSuccess', function(e) { 
  $('[name="AddItemToBasket"]').on('click', function() {
    $('body').bind('ajaxSuccess.custom', function() {
     totalBag();
     //alert('this works');
     $(this).unbind('ajaxSuccess');
  });
 });
});


totalBag();

Answer 1

编辑：修复了文本重复的问题。还添加了注释以便更好地理解。

检查您指定的链接并尝试以下修改后的代码。

根据@ ADyson，已删除click事件，该事件正在修复多事件触发。

关于您的其他问题，在事件发生后更新总数，是在触发ajaxSuccess后HTML正在更新。因此使用ajaxSuccess事件本身来获取篮子数量并在totalBag fn中使用它。

似乎工作正常。请确认：

//Adding empty div so that we can just update the value later
$(document).on('ready', function(){
    $('<div class="delivery-message"></div>').insertAfter('.breadcrumbs');
})

function totalBag(bagTotal) {
   var standardDeliveryLow = 49.99;
   var standardDeliveryHigh = 64.99;
   var expressDeliveryLow = 65.00;
   var expressDeliveryHigh = 99.99;
   //var bagValue = $('#basket-value').text();
   //var bagTotal = Number(bagValue.replace(/[^0-9\.-]+/g,""));

   //Using a variable to store the calculated amount with text
   var innerHTML = "";
   if (bagTotal >= standardDeliveryLow && bagTotal <= standardDeliveryHigh) {
       var standardDifference = parseFloat(Math.round((standardDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
       innerHTML= "<p>£"+ standardDifference +" from standar delivery</p>";
   } else if (bagTotal >= expressDeliveryLow && bagTotal <= expressDeliveryHigh) {
      var expressDifference = parseFloat(Math.round((expressDeliveryHigh - bagTotal) * 100) / 100).toFixed(2); 
      innerHTML= "<p>£"+ expressDifference +" from express delivery</p>";
   } else {
     return false;
   }
   //Updating the placeholder with new contents
   $(".delivery-message").html(innerHTML);
}

//Gets triggered after every Ajax Success.
//e -> event object, xhr -> The Ajax object which has request and response details, 
//settings -> The settings we used to trigger Ajax, including the request URL
$(document).on('ajaxSuccess', function(e, xhr, settings) { 
    //Checking if the request is of Adding Item to Basket
    if(settings.url.indexOf("AddItemToBasket") !== -1){
        //Getting the response and parsing it
        var resp = xhr.responseText;
        var respObj = JSON.parse(resp);
        //Checking if response is success i.e., item added to cart successfully
        if(respObj.success){
            //Getting the updated Basket value and calling totalBag
            var bagTotal = respObj.basket.subTotal;
            totalBag(bagTotal); 
        }       
    }

});
totalBag(0);

使用AJAX调用函数

1 个答案: