Как я могу использовать jQuery для циклического перемещения по массиву по нескольким элементам? - PullRequest
Новая
       25

Как я могу использовать jQuery для циклического перемещения по массиву по нескольким элементам?

0 голосов
/ 23 апреля 2019

У меня есть массив цветов. При загрузке я перебираю массив и добавляю его как класс и текст к каждому div с классом "квадрат"

При нажатии я хочу переключить класс / текст на этом квадрате к следующему элементу в массиве.

Я столкнулся с двумя препятствиями, которые, по моему мнению, связаны между собой, и я знаю, что это требует некоторой очистки.

  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>

1 Ответ

1 голос
/ 23 апреля 2019

Переменная counter объявлена ​​только один раз для всех квадратов. Так что, если вы начнете с 0 и сделаете 4 квадрата, то теперь counter будет на 4. Я думаю, что вы можете захотеть иметь разные счетчики для каждого квадрата, а затем просто запустить каждый счетчик с другим значением. Когда вы обновляете счетчик, вы не всегда получаете «следующий» цвет, потому что вы разделяете ту же концепцию того, что означает «следующий» между всеми квадратами.

Я немного переработал его, чтобы отделить способ генерации исходных цветов (вот как я пишу это!) От способа выбора «следующего» цвета. в основном мы генерируем индекс и сохраняем его как данные для каждого элемента, чтобы каждый мог вести свой счетчик.

Я также добавил user-select: none в ваш CSS, чтобы названия цветов не были случайно выделены при нажатии на квадраты.

Я надеюсь, что это работает для вас! Дайте мне знать, если что-то неясно о том, что я изменил. 

$(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>
...