Question

我正在尝试学习JavaScript，并且我看到了一个代码，可以根据您按下的按钮更改网页的CSS样式。

我无法理解为什么或如何for循环表示女巫按钮被按下。这是javascript部分：

var buttons = document.getElementsByTagName("button");

var len = buttons.length;

for (i = 0; i < len; i++) {
  buttons[i].onclick = function() {
    var className = this.innerHTML.toLowerCase();
      document.body.className = className;
  };
}

http://jsfiddle.net/qp9jwwq6/

我看了网和w3学校，但是他们没有用for循环解释那些代码。有人可以向我解释一下吗？

谢谢

Answer 1

让我们把它分解。

首先我们需要访问页面上的DOM元素，所以我们通过使用document本身的方法来做到这一点，该方法将返回我们想要操作的元素。

var buttons = document.getElementsByTagName("button");

buttons var将是页面上所有按钮的列表。我们想要对所有这些做一些事情，所以首先我们缓存列表的长度，即计算我们有多少按钮。

var len = buttons.length;

然后我们基本上说：将i设置为0，然后将其加1，直到它等于我们拥有的按钮数。

for (i = 0; i < len; i++) {

现在，要从列表中访问一个按钮，我们需要使用括号表示法。因此buttons[0]是第一个元素，buttons[1]是第二个元素，等等。由于i从0开始，我们将i放在括号中，以便在每次迭代时它都会访问列表中的下一个按钮。

  buttons[i].onclick = function() {
    var className = this.innerHTML.toLowerCase();
      document.body.className = className;
  };
}

这相当于：

 buttons[0].onclick = function() {
    var className = this.innerHTML.toLowerCase();
      document.body.className = className;
  };

 buttons[1].onclick = function() {
    var className = this.innerHTML.toLowerCase();
      document.body.className = className;
  };

 buttons[2].onclick = function() {
    var className = this.innerHTML.toLowerCase();
      document.body.className = className;
  };

// etc.

但当然超级效率低，我们可能不知道页面有多少个按钮。所以我们得到那里的所有按钮，找出有多少按钮，然后浏览每个按钮并为它分配一个事件处理程序以及一个新类。

现在，查看onclick处理程序本身，我们可以看到它首先找到按钮内的HTML被点击，将其转换为小写字母，并将其分配给变量：

var className = this.innerHTML.toLowerCase();

使用this我们确保每个按钮在点击时都知道它自己的innerHTML 。我们不会跟踪哪个按钮，我们只是告诉每个按钮检查它自己的内容。

然后它做的是将body HTML元素的类更改为我们刚刚解析的任何内容

document.body.className = className;

所以说你有像

这样的东西

<button>success</button>
<button>failure</button>
<button>warning</button>

点击第一个按钮会将<body>元素的类设置为success，点击第二个按钮会将其设置为failure，第三个按钮会将其设置为warning 1}}。

Answer 2

第一行将所有按钮保存在名为buttons的变量中。这实际上是一个数组，因为页面上可以有几个按钮。然后迭代每个按钮并定义一个应该在onclick上执行的函数。假设您有2个按钮，然后按钮[0]和按钮[1]可以获得该功能。

Answer 3

首先，一般来说，这段代码的基础是有点不稳定，不同寻常且不健壮，所以不要期望你处于学习任何强大的JavaScript或代码洞察力的边缘。设计。

回答：

for-loop没有＆＃34;表示＆＃34;按下了哪个按钮。相反，它遍历页面上的每个按钮元素，并将完全相同的函数定义分配给每个元素的onclick属性。单击特定按钮元素时最终运行的代码（此处我正在谈论函数体）通过分配给body将document.body.className元素分配给CSS {。}。

您的问题是询问函数如何知道要分配给document.body.className的类名。该函数从按钮元素的innerHTML中获取类名，该元素可以this.innerHTML访问（因为在事件处理程序中，this是对触发事件所在元素的引用发生了）。 HTML <button>元素有点特殊，虽然它通常是一个看起来很简单的按钮，但它也是一个非叶子节点，这意味着它包含自己的HTML。你可以在那里放很多东西，但是在这个例子中，他们只有一个纯文本节点，它完全（或几乎完全）由类名称组成（Normal为一个，Changed为其他）。这就是函数如何获得特定于该按钮的CSS类名;它从点击的<button>元素内的文本中抓取它。

我说＆＃34;几乎完全＆＃34;回到那里因为按钮文本和他们在CSS规则中定义的实际CSS类（normal和changed）实际上存在字母大小差异。这就是为什么在分配类名之前必须降低提取的按钮文本（toLowerCase()）的字母大小写的原因。 CSS类区分大小写（请参阅Are CSS selectors case-sensitive?）。

正如我所说，这是不寻常的代码。在纯HTML文本和代码元数据（本例中为CSS类）之间创建映射（尤其是不精确的映射！）是不可取的。

无法通过for循环代码理解Javascript事件处理程序

3 个答案: