使用 javascript/jQuery 陷入索引 5 的 For 循环迭代答案

【问题标题】：Stuck in For loop iteration of index 5 using javascript/jQuery使用 javascript/jQuery 陷入索引 5 的 For 循环迭代
【发布时间】：2020-10-21 05:54:01
【问题描述】：

我正在为我正在学习的课程的初学者项目构建连接四。我无法让它在过去的索引 5 上移动。似乎仍然返回 true 索引 5 未定义，即使在我第一次单击它之后，它已经变成红色。我认为它会在每次单击后运行 for 循环，再次从 5 开始，但它会返回 False，然后返回到下一个索引 4，检查那个，等等。我查了很多，我只是卡住了。我想不通。

我知道代码在游戏的长期运行中并不完整；我只是想理解这一步，不管代码有多难看，这样我就可以继续下一段了。

    var gClass = $(".G")

function returnBackgroundColor(rowIndex,colIndex){
  // console.log($(colIndex[rowIndex]).prop("background-color"));
  // console.log(rowIndex);
  return($(colIndex[rowIndex]).prop("background-color"));
}

function changeColor(row, someClass){
  someClass.eq(row).css("background-color","red");
}

function checkColor(someClass){
  someClass.click(function() {
    for (var row = 5; row > -1; row--) {
      if (returnBackgroundColor(row, someClass) === undefined){
        console.log(row);
        return changeColor(row, someClass);
      }else {
        console.log("False");
      }
    }
  })
}

checkColor(gClass)

【问题讨论】：

我已经阅读了一圈，但似乎无法找到我正在寻找的答案。我知道 for 循环将遍历每个元素，这可能是我的问题。我认为使用行索引 (??) 会个性化每个元素，我认为我已经正确地写出来了。我只是不确定如何只处理满足 if 要求的第一个元素，然后停止。我假设在执行 .css 更改之前使用 return for row 并将其分配给变量是一种可行的方法，但我想在我继续之前看看你们的想法。

标签： javascript jquery iteration logic

【解决方案1】：

不要在每次单击时都使用 .G 类名遍历所有元素，而是尝试在单击函数中使用 jQuery $(this) 关键字。像这样：

function addClickListener(someClass){
   $(someClass).each(function () {
      this.addEventListener('click', function() {
          // an example of how you use the $(this) 
          $(this).addClass('background-color-red');
      });
  });
}

这样，您将摆脱那个 for 循环和您的索引问题。

【讨论】：