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

Posted 2023-05-09

技术标签:

【中文标题】如何在单击多个项目时使用 jQuery 循环遍历数组？【英文标题】：How can I use jQuery to cycle through an array on click for multiple items? 【发布时间】：2019-09-13 01:45:25 【问题描述】：

我有一系列颜色。在加载时，我循环遍历数组并将其作为类和文本添加到每个带有“square”类的 div

单击时，我想将该方块上的类/文本切换到数组中的下一项。

我遇到了 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 spandisplay:block;

.black
  background-color:#000;
  color:#fff;
.blue
  background-color:#00f;
  color:#fff;
.cyanbackground-color:#0ff;
.greenbackground-color:#0f0;
.magentabackground-color:#F0F;
.redbackground-color:#f00;
.yellowbackground-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>

【问题讨论】：

【参考方案1】：

对于所有方块，您只声明了一次 counter 变量。因此，如果您从 0 开始并制作 4 个方格，现在counter 为 4。我认为您可能希望为每个方格设置一个不同的计数器，然后以不同的值开始每个计数器。当您更新计数器时，您并不总是获得“下一个”颜色，因为您在所有方格之间共享“下一个”含义的相同概念。

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

我还在您的 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>

编辑

这里是上述内容的更简化/优化的版本。大多数情况下，这会删除 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>

【讨论】：

非常感谢。我不认为我自己会以这种方式到达这里。我不完全理解 setColour 函数的第一行。获取 counter 和 .... colours.indexOf 等的元素数据？我也不明白 html 文本在哪里更新。我看到当前颜色类在哪里被删除，但是 span 只是被覆盖而不是先被清空？更正.html() 函数。这只是覆盖了该元素的内部 HTML。您不必先“清除”它。 api.jquery.com/html。对于.indexOf() 函数，它只是告诉传入的项目在数组中的哪个位置。例如['a', 'b', 'c'].indexOf('b') 将返回1，因为它是数组中的第二个项目（并且因为它从0 开始）所以我们使用它来查找我们已经有名称的颜色的索引。然后我们将其作为数据“存储”在 HTML 元素本身上，而不是在 JS 变量中。查看api.jquery.com/data 了解更多信息，但基本上$('#my-element').data('foo', 'bar') 将使用“foo”的“查找键”和“bar”的值保存数据。如果我想稍后再读回该数据，我可以执行$('#my-element').data('foo')，这将返回"bar" 给我另外，查看我更新的答案，它使用循环而不需要输入 a<div class="square"><span></span></div> 元素 100 次

以上是关于如何在单击多个项目时使用 jQuery 循环遍历数组？的主要内容，如果未能解决你的问题，请参考以下文章

使用 jquery 中的每个循环的 Next 和 Prev 按钮功能

以循环方式使用jquery更改多个图像src

如何在循环中发送多个 SOAP 请求：PHP？

遍历 Jquery 循环中的每个属性

jQuery/Js 循环遍历 Codeigniter MySQL 输出的数据

当我在菜单外单击时如何隐藏多个 jQuery toggle()？