Question

我在JavaScript中制作一个简单的Cricket记分牌。我基本上有一个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的需要。试试这个：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

要使每个都有自己的计数器，您可以使用绑定到相关标签的数据属性，并通过jQuery轻松访问，您的标签指定您正在使用它：

<div class="click" data-count="0"></div>

我将数据属性添加到上面的HTML中，但是如果第一次点击它不存在，下面的代码实际上会动态添加它。

$('.click').click(function() {
  //get existing count+1 or 0+1 if it the data-attribute doesn't exist.
  var x       = ($(this).data('count') || 0) + 1;
  //reset back to zero if we've gotten to 4
  x           = x >= 4 ? 0 : x;
  //set our new value back into the data attribute so the next run can
  //increment.
  $(this).data('count',x);

  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")');
  }
});

如何在JavaScript中为每个HTML类实例创建一个单独的变量？

2 个答案: