正文 

当前位置： 首页 > 源码 >

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

     2023-05-09     53

关键词：

【中文标题】如何在单击多个项目时使用 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&lt;div class="square"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt; 元素 100 次

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

】当我在菜单外单击时如何隐藏多个jQuerytoggle()？【英文标题】：HowtohidemultiplejQuerytoggle()whenIclickoutsideofthemenu?【发布时间】：2015-12-0421:42:14【问题描述】：我的页面上有多个切换元素。单击div元素的外部时，我试图将它们关闭。... 查看详情

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

...9:28【问题描述】：我的html文件中有3个img标签。我想通过单击存储9个图像src链接的数组中的按钮来更改所有3个img的src。因此，当页面第一次加载时，它将显示前3张图像[0,1,2]。然后在每个next-btn单击它会将图像更 查看详情

如何在单击时结束 jquery 函数

】如何在单击时结束jquery函数【英文标题】：howtoendajqueryfunctiononclick【发布时间】：2011-07-0501:45:30【问题描述】：我目前使用jQueryslug插件来创建基于标题框的项目slug。这很好用。我正在做的只是在用户单击编辑链接时更新slug。... 查看详情

如何使用jQuery无限循环播放音频文件

】如何使用jQuery无限循环播放音频文件【英文标题】：HowtoplayanaudiofileinainfiniteloopusingjQuery【发布时间】：2015-11-2018:38:14【问题描述】：现在我有一段代码（如下），它允许我在单击按钮时播放音频文件。但是，我希望文件在无... 查看详情

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

...按钮时，我尝试显示下一个和上一个.cl-item，但我不知道如何使用jQuery编写此功能。这是我的HT 查看详情

如何使用 jQuery 在用户单击时在特定 li 上添加活动类

】如何使用jQuery在用户单击时在特定li上添加活动类【英文标题】：HowtoaddclassactiveonspecificlionuserclickwithjQuery【发布时间】：2014-02-0210:02:12【问题描述】：我有一个包含某些项目的菜单，当用户clicks在任何li上时，我希望它的类变... 查看详情

使用Jquery和PHP单击保存按钮时如何将多个表行更新为mysql表？

】使用Jquery和PHP单击保存按钮时如何将多个表行更新为mysql表？【英文标题】：HowtoupdatemultipletablerowsintomysqltablewhenclicksavebuttonusingJqueryandPHP?【发布时间】：2021-10-2319:19:45【问题描述】：我有一个myql表名-invoice_detailsinvoice_numberrecei... 查看详情

选择多个项目时的jQuery性能

】选择多个项目时的jQuery性能【英文标题】：jQueryperformancewhenselectingmultipleitems【发布时间】：2011-01-0908:01:54【问题描述】：这更像是一个好奇的问题。执行以下操作时：$(\'.selector1,.selector2\').doSomething()jQuery是完全遍历DOM两次以... 查看详情

在 v-for 循环中单击时检索数据，然后循环遍历数据

】在v-for循环中单击时检索数据，然后循环遍历数据【英文标题】：Retrievedataonclickinv-forloopandthenloopthroughthedata【发布时间】：2020-07-1602:03:56【问题描述】：我在v-for循环中有一个按钮，单击该按钮可检索一些数据。然后，我想在... 查看详情

如何在滚动时为页面上的多个缩略图集实现 jQuery 图像循环循环？

】如何在滚动时为页面上的多个缩略图集实现jQuery图像循环循环？【英文标题】：HowdoIimplementjQueryimagecycleloopsonrolloverformultiplethumbnailsetsonapage?【发布时间】：2012-07-0109:53:40【问题描述】：这是我目前拥有的Javascript<scripttype="text... 查看详情

Jquery 不使用 next() 方法遍历

...hod【发布时间】：2020-03-0122:41:19【问题描述】：我有一个单击事件处理程序，它在触发时将“活动”类添加到正文部分。问题是如果我单击当前按钮，它会将“活动”添加到下一个节点而不是当前节点。因此，当在每个集合中单... 查看详情

单击pushbutton时如何在多个qlabel中打印？(代码片段)

单击PushButton？时如何在多个QLabel中打印，因为它仅适用于数量我也希望它在项目名称和价格中。我试过把多个print_click（自我）它不会工作它说重新定义未使用的'print_clink'。提前致谢我的代码：importsysfromPyQt5.QtWidgetsimportQApplicati... 查看详情

如何使用 jquery 在单击时切换框阴影

】如何使用jquery在单击时切换框阴影【英文标题】：Howtotoggleboxshadowonclickwithjquery【发布时间】：2017-11-0417:03:13【问题描述】：我正在尝试更改单击div上的框阴影这是我的代码index.html<html><head><scriptsrc="jquery-3.2.1.min.js"&g... 查看详情

如何使用 Jquery 更改按钮单击时的 django 外键对象文本选择字段？

】如何使用Jquery更改按钮单击时的django外键对象文本选择字段？【英文标题】：HowtochangedjangosforeignkeyobjectstextchoicefieldonbuttonclickwithJquery?【发布时间】：2020-07-0210:15:47【问题描述】：我有2个模型ToDoList和Tasks。在Tasks模型中，我将... 查看详情

使用 For Each 循环遍历列表时删除列表中的项目

】使用ForEach循环遍历列表时删除列表中的项目【英文标题】：RemovingItemsinaListWhileIteratingThroughItwithForEachLoop【发布时间】：2013-10-1515:31:01【问题描述】：我有一个名为NeededList的列表，我需要检查此列表中的每个项目以查看它是否... 查看详情

如何在闪亮中循环观察事件？单击多边形时更改传单中的样式

】如何在闪亮中循环观察事件？单击多边形时更改传单中的样式【英文标题】：HowdoIloopanobserveEventinshiny?tochangestyleinleafletwhenpolygonsareclicked【发布时间】：2021-12-2608:20:13【问题描述】：我有一个项目，我正在为之构建一个闪亮的... 查看详情

Jquery 循环遍历在运行时创建的元素

】Jquery循环遍历在运行时创建的元素【英文标题】：JqueryLoopingthroughelementscreatedatruntime【发布时间】：2013-02-2407:04:31【问题描述】：我有一个传递给页面的列表，并且元素是在运行时创建的。我想遍历这些元素并为每个元素执行... 查看详情

单击带有recyclerview的项目片段时如何将数据传递给活动

】单击带有recyclerview的项目片段时如何将数据传递给活动【英文标题】：howtopassingdatawhenclickedonitemfragmentwithrecyclerviewtoactivity【发布时间】：2021-01-1209:59:52【问题描述】：我有一个关于将点击的卡片视图数据传递给活动的问题当... 查看详情