Question

javascript新手。我想要这个程序要做的是如果单击每一行的第一个单元格，我想突出显示该行。如果单击任何其他单元格，我想突出显示该单元格。我认为我的逻辑是正确的，如果我能得到单元格索引，我可以突出显示正确的单元格，但是不断传入我的高亮显示功能的数字是9.不确定我哪里出错了。

window.onload = function() {
  var cells = document.getElementsByTagName("td");
  var theads = document.getElementsByTagName("th");

  for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener("click", function() {
      highlightCell(i);
    });
  }

    function highlightCell(x) {
      //alert(x + " clicked");
      if (x == 0) {
        //highlight table cells 0,1,2 lightBlue
        //highlight others to white
      } else if (x == 3) {
        //highlight table cells 3,4,5
        //highlight others to white
      } else if (x == 6) {
        //highlight table cell 6,7,8
        //highlight others to white
      } else {
        //highlightCell single table cell clicked
        //hihglight others to white
      }
    }

  }
}

Answer 1

将var i更改为let i。 let解决了引用和闭包的Javascript问题。参考：https://stackoverflow.com/a/30479554/5351510

for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {       
    highlightCell(i);
  });
}

Answer 2

戈登的回答是可行的，但是让它成为所有浏览器可能都不支持的标准的补充。您可以重写这样的功能，以实现封闭和更广泛的兼容性：

var cells = document.getElementsByTagName("td");
var theads = document.getElementsByTagName("th");

for (var i = 0; i < cells.length; i++) {
  (function(){
    var x=i
    cells[x].addEventListener("click", function() {
      highlightCell(x);
  }());
}

function highlightCell(x){
  console.log(x);
}

Answer 3

这是一个典型的范围问题，可以通过闭包来解决。基本上是你在＆＃39; for＆＃39;中的变量i。正在访问外部范围的i值，这是我从＆＃39;中获得的最后一个数字。要解决此问题，您需要将每个函数中的变量绑定到一个单独的唯一作用域，以便它不会访问外部作用域。

查看本指南的范围和闭包： https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch1.md。

返回一个返回函数的函数，以便创建一个新的作用域。

function highlightCell(i) {
  return function() { ...do your highlight thing that uses i... };
}

cells[i].addEventListener("click", function() {
  highlightCell(i);
});

通过单击第一列的单元格突出显示表行

3 个答案: