jQuery中如何为4个独立ID分别维护click计数变量

你遇到的问题本质是全局变量共享状态导致的干扰——所有元素共用同一个click变量，所以点击任何一个都会让全局计数增加，自然无法独立控制。想要避免重复写四个函数，我们可以用jQuery的data()方法给每个元素绑定专属的状态，完美解决这个问题。

修改后的代码实现 #

$("#head, #mouth, #nose, #eyes").click(function () {
  // 读取当前元素的点击计数，若未初始化则默认设为0
  let clickCount = $(this).data('click') || 0;

  if (clickCount < 9) {
    $(this).animate({left: "-=367px"}, 500);
    clickCount++;
  } else {
    $(this).animate({left: "0px"}, 500);
    clickCount = 0;
  }

  // 将更新后的计数存回当前元素的data属性中
  $(this).data('click', clickCount);
});

代码解释 #

• $(this).data('click')：jQuery的data()方法可以把数据和DOM元素绑定在一起，每个元素都有独立的存储空间，不会互相影响。
• 初始化逻辑：|| 0确保第一次点击元素时，计数从0开始（因为未设置过data时返回undefined，逻辑或会取0）。
• 更新计数：每次操作后把新的计数存回元素的data属性，这样下次点击该元素时就能读取到最新的专属计数。

这种写法既保持了代码的简洁性（只用一个点击处理函数），又实现了每个ID单独计数的需求，完全避免了冗余代码。

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