javascript - 如何为 JavaScript 中 HTML 类的每个实例拥有单独的变量？

Question

我正在用 JavaScript 制作一个简单的板球记分板。我基本上有一个 div，每次单击它时，它都会在几个不同的背景图像之间循环。你可以明白我的意思here 。

示例 1 中的 HTML 为:

<div class = "click"></div>

这样工作正常，但我使用了一个全局变量来计算图像周期，所以当我尝试添加多个框时，会发生这种情况:

var x = 0;

$('.click').click(function() {
  x++;
  if (x == 4) {
    x = 0;
  }

  switch (x) {
    case 0:
      $(this).css('background-image', 'url("none")')
      break;
    case 1:
      $(this).css('background-image', 'url("https://i.imgur.com/25qbHoC.png")');
      break;
    case 2:
      $(this).css('background-image', 'url("https://i.imgur.com/9pcneSb.png")');
      break;
    case 3:
      $(this).css('background-image', 'url("https://i.imgur.com/Vfxu8ap.png")');
  }
});

.click {
  height: 150px;
  width: 150px;
  background-color: steelblue;
  background-size: 150px 150px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click"></div>
<div class="click"></div>
<div class="click"></div>
<div class="click"></div>

我怎样才能防止这种情况发生，并且只拥有您在第一个示例中看到的多个内容？谢谢。

Answer 1

问题是因为您使用的是全局计数器，而不是每个图像实例一个计数器。要解决此问题，您可以使用 data 属性来存储特定于该图像的计数器。

另请注意，您可以通过将图像设置存储在数组中并访问该数组而不是 switch 语句来使逻辑更加简洁。您还可以使用模运算符来取消将计数器重置回 0 的需要。试试这个:

var images = [
  'url("none")',
  'url("https://i.imgur.com/25qbHoC.png")',
  'url("https://i.imgur.com/9pcneSb.png")',
  'url("https://i.imgur.com/Vfxu8ap.png")'
]

$('.click').click(function() {
  var $el = $(this);
  var x = $el.data('counter') || 1;
  $el.css('background-image', images[x % 4]).data('counter', ++x);
});

.click {
  height: 150px;
  width: 150px;
  background-color: steelblue;
  background-size: 150px 150px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="click"></div>
<div class="click"></div>
<div class="click"></div>
<div class="click"></div>