JS循环修改类属性仅执行8次迭代后停止

核心错误点 #

你在ChangeClassAttributes函数的循环条件里犯了一个低级错误：用字符串的长度代替了元素集合的长度。

FindClass是你传入的字符串参数"sentence"，这个字符串的字符数正好是8（s-e-n-t-e-n-c-e），所以循环只执行8次，自然只会修改前8个带sentence类的元素。

错误代码片段 #

// 错误：用了字符串FindClass的长度，而非元素集合ClassToStyle的长度
for (let i = 0; i < FindClass.length; i++) { 
  ClassToStyle[i].style.display = ChangeAttribute;
}

修复后的完整JS代码 #

function SentenceInline() {ChangeClassAttributes('sentence','inline');}
function SentenceBlock() {ChangeClassAttributes('sentence','block');}

function ChangeClassAttributes(FindClass,ChangeAttribute) {
  var ClassToStyle = document.getElementsByClassName(FindClass);
  // 修正：使用元素集合的长度来遍历所有匹配元素
  for (let i = 0; i < ClassToStyle.length; i++) { 
    ClassToStyle[i].style.display = ChangeAttribute;
  }
}

额外HTML结构修正 #

你的HTML里存在多余的闭合标签：第一个按钮后面的</p>没有对应的<p>开头，最后又有一个无匹配的</p>，会导致浏览器解析异常，建议修正为：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="display.js"></script>
</head>
<body>
<p>
  <button type="button" onclick="SentenceInline()">Sentences = inline</button><br>
  <button type="button" onclick="SentenceBlock()">Sentences = block</button>
</p>
<span class="sentence" id="first-p1-s1">Span 1</span>
<span class="sentence" id="first-p1-s2">Span 2</span>
…
<span class="sentence" id="first-p1-s9">Span 9</span>
<span class="sentence" id="first-p1-s10">Span 10</span>
<span class="sentence" id="first-p1-s11">Span 11</span>
<span class="sentence" id="first-p1-s12">Span 12</span>
</body>
</html>

内容的提问来源于stack exchange，提问作者Wintermute101