我如何使用 jQuery 在点击多个项目时循环遍历数组？

Question

我有一组颜色。在加载时，我循环遍历数组并将其添加为 class 并使用 class "square"

将文本添加到每个 div

单击时我想将该方块上的 class/text 切换到数组中的下一项。

我遇到了 2 个我认为相关的障碍，我知道它需要一些清理。

加载时，数组从数组中的第二项开始而不是第一项，除非我将计数器设置为 =-1 而不是 =0
当我单击任何方块时，它会跳过数组中的下一项。然后正常进行。

我为 .each 尝试了不同的方法，但一直陷入不同的错误结果并返回到最后一个几乎可行的方法。

当我单击一个正方形时，我希望它更新为数组中与其当前颜色相关的下一个颜色。我还希望网格从左上角的黑色开始。

$(document).ready(function(){

//array of colours
 var colours = ['black', 'blue', 'cyan', 'green', 'magenta', 'red', 'yellow'],
counter = 0;
function nextColour(){
   counter = (counter + 1) % colours.length;
}
  
// on Load iterate over all the squares in the grid
// add the colour class in order of the array & matching text to span
  $('.square').each(function(){
    nextColour();
    $(this).addClass(colours[counter]);
    $(this).find("span").html(colours[counter]);
  });
  
 // on click change the square to the next colour in the array
$('.square').click(function(){
     $(this).removeClass(colours);
     $(this).find("span").html("");
      nextColour();
  // Add next colour in array for this item
     $(this).addClass(colours[counter]);
     $(this).find("span").html(colours[counter]);
  });
  
});

.squares{
  background-color:#dedede;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 50px;
  height:500px;
  width:500px;}
.square{
  align-items:center;
  color:#000;
  display:flex;
  justify-content:center;
  outline: 1px solid #000;}
.square span{
  display:none;
  font-size:11px;
  text-align:center;
text-transform:capitalize;}
.square:hover span{display:block;}

.black{
  background-color:#000;
  color:#fff;}
.blue{
  background-color:#00f;
  color:#fff;}
.cyan{background-color:#0ff;}
.green{background-color:#0f0;}
.magenta{background-color:#F0F;}
.red{background-color:#f00;}
.yellow{background-color:#ff0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="squares">
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  
   <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  
    <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  
   <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div> 
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div> 
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  
   <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div> 
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  
   <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

</section>

Answer 1

您只需为所有方块声明一次 counter 变量。所以如果你从 0 开始计算 4 个方块，现在 counter 是 4。我想你可能想为每个方块设置不同的计数器，然后以不同的值开始每个计数器。当您更新计数器时，您并不总是获得 "next" 颜色，因为您共享相同的概念，即 "next" 在所有方块之间的含义。

我对其进行了一些重新处理，以区分初始颜色（我就是这样拼写的！）的生成方式与 "next" 颜色的选择方式。基本上我们生成一个索引，并将其保存为每个元素的数据，因此每个元素都可以维护自己的计数器。

我还向您的 CSS 添加了 user-select: none，这样单击方块时颜色名称就不会意外突出显示。

希望这对你有用！如果对我所做的更改有任何不清楚的地方，请告诉我。

$(document).ready(function() {

  //array of colours
  var colours = ['black', 'blue', 'cyan', 'green', 'magenta', 'red', 'yellow']

  function getNextColour($element) {
    var counter = $element.data('counter');
    counter = (counter + 1) % colours.length;
    return colours[counter];
  }

  function setColour($element, colourName) {
    $element.data('counter', colours.indexOf(colourName));
    $element.addClass(colourName);
    $element.find("span").html(colourName);
  }

  // on Load iterate over all the squares in the grid
  // add the colour class in order of the array & matching text to span
  $('.square').each(function(i) {
    var colourIndex = i % colours.length;
    setColour($(this), colours[colourIndex]);
  });

  // on click change the square to the next colour in the array
  $('.square').click(function() {
    $(this).removeClass(colours);
    var nextColor = getNextColour($(this));
    setColour($(this), nextColor);
  });

});

.squares {
  background-color: #dedede;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 50px;
  height: 500px;
  width: 500px;
}

.square {
  align-items: center;
  color: #000;
  display: flex;
  justify-content: center;
  outline: 1px solid #000;
}

.square span {
  display: none;
  font-size: 11px;
  text-align: center;
  text-transform: capitalize;
  user-select: none;
  /* <----- prevent text selection when clicking! */
}

.square:hover span {
  display: block;
}

.black {
  background-color: #000;
  color: #fff;
}

.blue {
  background-color: #00f;
  color: #fff;
}

.cyan {
  background-color: #0ff;
}

.green {
  background-color: #0f0;
}

.magenta {
  background-color: #F0F;
}

.red {
  background-color: #f00;
}

.yellow {
  background-color: #ff0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="squares">
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>
  <div class="square"><span></span></div>

</section>

编辑

这里是上述内容的 simplified/optimized 版本。这主要是删除了 100 个相同的 html 元素，我们可以使用 JS 循环来创建这些元素，而不需要将它们全部键入。

$(document).ready(function() {

  //array of colours
  var colours = ['black', 'blue', 'cyan', 'green', 'magenta', 'red', 'yellow']

  function getNextColour($element) {
    //get the data from the passed in element
    var counter = $element.data('counter');
    //update the counter and then return the new color name
    counter = (counter + 1) % colours.length;
    return colours[counter];
  }

  function setColour($element, colourName) {
    //With the passed in element...
    $element
      .addClass(colourName)  //Add a class
      .data('counter', colours.indexOf(colourName)) //update the data with the new color index number
      .find('span').text(colourName); //change the text of the color name
  }
  
  //Select the container once
  var $container = $('#squares-container');
  
  //Create 100 squares in a loop
  for (var i = 0; i < 100; i++) {
    //Using the index from the loop, go through the array of colors
    var colourIndex = i % colours.length;
    //Create a new element
    var $newSquare = $('<div class="square"><span></span></div>');
    //Set the color on it
    setColour($newSquare, colours[colourIndex]);
    //Put it inside of the container
    $container.append($newSquare);
    
    $newSquare.click(function() {
      $(this).removeClass(colours);
      var nextColor = getNextColour($(this));
      setColour($(this), nextColor);
    });
  }

});

#squares-container {
  background-color: #dedede;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 50px;
  height: 500px;
  width: 500px;
}

.square {
  align-items: center;
  color: #000;
  display: flex;
  justify-content: center;
  outline: 1px solid #000;
}

.square span {
  display: none;
  font-size: 11px;
  text-align: center;
  text-transform: capitalize;
  user-select: none; /* <----- prevent text selection when clicking! */
}

.square:hover span {
  display: block;
}

.black {
  background-color: #000;
  color: #fff;
}

.blue {
  background-color: #00f;
  color: #fff;
}

.cyan {
  background-color: #0ff;
}

.green {
  background-color: #0f0;
}

.magenta {
  background-color: #F0F;
}

.red {
  background-color: #f00;
}

.yellow {
  background-color: #ff0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="squares-container"></section>

我如何使用 jQuery 在点击多个项目时循环遍历数组？

How can I use jQuery to cycle through an array on click for multiple items?

arrays

each

jquery

编辑