严格模式下JavaScript循环不执行，手风琴点击无滑动效果求助

首先，这种严格模式('use strict')和非严格模式的行为差异，大概率是语法细节或上下文绑定的问题导致脚本提前终止——循环没执行自然没法绑定点击事件，手风琴也就没效果了。结合手风琴组件的常见写法，我整理了几个最可能的故障点：

1. 未声明变量引发的ReferenceError #

严格模式下禁止隐式全局变量——如果你在循环里用了没通过var/let/const声明的变量（比如循环计数器i），浏览器会直接抛出ReferenceError，脚本执行到这里就停了，循环根本跑不完，点击事件自然没绑定上。

举个典型的错误写法：

'use strict';
// 错误：i没有声明，严格模式下直接报错
for (i = 0; i < document.querySelectorAll('.accordion-title').length; i++) {
  document.querySelectorAll('.accordion-title')[i].onclick = function() {
    this.nextElementSibling.classList.toggle('active');
  }
}

修复方式很简单，给变量加上声明：

'use strict';
const accordionTitles = document.querySelectorAll('.accordion-title');
// 用let声明i，保证块级作用域
for (let i = 0; i < accordionTitles.length; i++) {
  accordionTitles[i].addEventListener('click', function() {
    const content = this.nextElementSibling;
    // 实现滑动展开/收起
    if (content.style.height === '' || content.style.height === '0px') {
      content.style.height = content.scrollHeight + 'px';
    } else {
      content.style.height = '0px';
    }
  });
}

2. this指向错误导致无法操作DOM #

严格模式下，普通函数的this默认是undefined（非严格模式下会自动指向window）。如果你的事件处理函数错误地依赖了this的指向，就会导致无法获取到内容元素。

比如误用箭头函数作为事件处理函数（箭头函数的this继承自外层上下文，严格模式下全局上下文的this是undefined）：

'use strict';
accordionTitles.forEach(title => {
  title.onclick = () => {
    // 错误：this是undefined，无法访问nextElementSibling
    this.nextElementSibling.style.height = 'auto';
  }
});

修复方案：改用普通函数，或者通过event.target获取触发事件的元素：

'use strict';
accordionTitles.forEach(title => {
  title.addEventListener('click', (e) => {
    const content = e.target.nextElementSibling;
    content.style.height = content.style.height === '0px' ? content.scrollHeight + 'px' : '0px';
  });
});

3. 严格模式禁止的语法导致脚本终止 #

严格模式还禁止了一些非严格模式下允许的“坏语法”，比如：

• 函数参数重名（比如function foo(a,a){}）
• 使用delete操作符删除变量（非属性）
• 八进制数字字面量（比如0123）

如果你的代码里有这些写法，严格模式下会直接抛出语法错误，脚本终止执行，循环自然无法运行。

快速排查建议 #

最快的方式是打开浏览器的开发者工具（F12）→ Console面板，里面会显示具体的错误信息（包括错误位置和原因），根据提示定位问题会比盲目猜测高效得多。比如如果看到ReferenceError: i is not defined，就直接去循环里补全变量声明即可。

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