如何在点击多个项目时使用jQuery循环访问数组？

问题描述 投票：0回答：1

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

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

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

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

我为.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>
jquery arrays each
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.