如何为JavaScript添加事件/触发器？实时统计购物车数量求助

嘿，我来帮你解决这个问题！你遇到的核心问题是原来的统计代码只在页面加载时执行了一次，所以后续按钮的类变化时，没法自动更新购物车的数量。咱们可以通过把统计逻辑封装成一个可重复调用的函数，在每次商品添加完成时手动触发它，就能实现实时响应啦。

步骤1：封装更新购物车数量的函数 #

先把统计并更新购物车显示的代码抽成一个独立函数，这样我们可以在需要的时候随时调用它：

function updateCartCount() {
  // 获取所有带有"ui-state-highlight"类的元素数量
  var cartItems = document.getElementsByClassName('ui-state-highlight').length;
  // 找到购物车数量显示的元素
  var cart = document.getElementById('cart');
  // 更新显示内容
  cart.textContent = cartItems + " items";
}

步骤2：页面初始化时先执行一次 #

页面加载完成后，先调用这个函数初始化购物车的初始数量（避免一开始显示0或者空白）：

$(function() {
  // 初始化购物车数量
  updateCartCount();
  
  // 你的拖拽交互代码...
});

步骤3：在拖拽完成的事件中调用函数 #

修改你现有的droppable的drop事件处理逻辑，在添加完类和修改按钮文字后，调用我们的更新函数，这样每次拖拽添加商品后都会实时更新数量：

$("#droppable1").droppable({
  classes: {
    "ui-droppable-active": "ui-state-default"
  },
  drop: function(event, ui) {
    $(this)
      .addClass("ui-state-highlight")
      .find("button.b1")
      .html("Added!");
    
    // 每次商品添加完成后，更新购物车数量
    updateCartCount();
  }
});

完整的整合代码 #

把所有部分整合起来，最终的代码应该是这样的：

function updateCartCount() {
  var cartItems = document.getElementsByClassName('ui-state-highlight').length;
  var cart = document.getElementById('cart');
  cart.textContent = cartItems + " items";
}

$(function() {
  // 初始化购物车数量
  updateCartCount();

  // 初始化拖拽元素
  $("#draggable1").draggable({ revert: "valid" });
  $("#draggable2").draggable({ revert: "valid" });
  $("#draggable3").draggable({ revert: "valid" });
  $("#draggable4").draggable({ revert: "valid" });

  // 初始化放置区域
  $("#droppable1").droppable({
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("button.b1")
        .html("Added!");
      
      // 更新购物车数量
      updateCartCount();
    }
  });
});

这样修改后，每次你把商品拖拽到「Add to cart」按钮并成功添加时，购物车的数量就会自动更新啦。如果之后你需要实现移除商品的功能，只需要在移除商品、修改按钮类之后，同样调用updateCartCount()函数，就能保持数量的实时准确。

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