Javascript循环不在严格模式下执行，否则它可以工作

时间：2018-01-26 11:16:02

标签： javascript strict

我已创建了代码段，按钮应通过单击上下滑动，但由于某种原因不会发生这种情况。它看起来像一些微妙的语法错误？如果我需要提供一些额外信息，请告诉我。

有人可以指导我为什么我的剧本不起作用吗？

提前致谢。

我的代码在这里：

function add_directory_rewrite() {
    add_rewrite_tag("%symbol%", '([a-zA-Z0-9_]+)');
    add_rewrite_rule('^crypto-monnaies/([a-zA-Z0-9_]+).html', '/crypto-monnaies/showcoin/?symbol=$matches[1]', 'top');
}
add_action( 'init', 'add_directory_rewrite' );

(function() {
  'use strict';
  var accItem = document.getElementsByClassName('accordionItem');
  var accHD = document.getElementsByClassName('accordionItemHeading');
  for (i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
  }

  function toggleItem() {
    var itemClass = this.parentNode.className;
    for (i = 0; i < accItem.length; i++) {
      accItem[i].className = 'accordionItem close';
    }
    if (itemClass == 'accordionItem close') {
      this.parentNode.className = 'accordionItem open';
    }
  }

}(window, document));
body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
}

.accordionWrapper {
  padding: 30px;
  background: #fff;
  float: left;
  width: 80%;
  box-sizing: border-box;
  margin: 10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
}

.accordionItem {
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Open-sans', Arial, sans-serif;
}

.accordionItemHeading {
  cursor: pointer;
  margin: 0px 0px 10px 0px;
  padding: 10px;
  background: #2980b9;
  color: #fff;
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
}

.close .accordionItemContent {
  height: 0px;
  transition: height 1s ease-out;
  -webkit-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  float: left;
  display: block;
}

.open .accordionItemContent {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  width: 100%;
  margin: 0px 0px 10px 0px;
  display: block;
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: top;
  -o-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -o-transition: -o-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  transition: transform 0.4s ease;
  box-sizing: border-box;
}

.open .accordionItemHeading {
  margin: 0px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottom-right: 0px;
  -moz-border-radius-bottom-left: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #bdc3c7;
  color: #7f8c8d;
}

2 个答案:

答案 0 :(得分：1)

您错过了错误中所述的for循环中的i var声明

  

“message”：“未捕获的ReferenceError：我未定义”，

要解决此问题，请在for-loop

中声明i var 
for (var i = 0; i < accHD.length; i++) {

工作代码：https://jsfiddle.net/q8pyfem8/ 

(function() {
  'use strict';
  var accItem = document.getElementsByClassName('accordionItem');
  var accHD = document.getElementsByClassName('accordionItemHeading');
  for (var i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
  }

  function toggleItem() {
    var itemClass = this.parentNode.className;
    for (var i = 0; i < accItem.length; i++) {
      accItem[i].className = 'accordionItem close';
    }
    if (itemClass == 'accordionItem close') {
      this.parentNode.className = 'accordionItem open';
    }
  }

}(window, document));
body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
}

.accordionWrapper {
  padding: 30px;
  background: #fff;
  float: left;
  width: 80%;
  box-sizing: border-box;
  margin: 10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
}

.accordionItem {
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Open-sans', Arial, sans-serif;
}

.accordionItemHeading {
  cursor: pointer;
  margin: 0px 0px 10px 0px;
  padding: 10px;
  background: #2980b9;
  color: #fff;
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
}

.close .accordionItemContent {
  height: 0px;
  transition: height 1s ease-out;
  -webkit-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  float: left;
  display: block;
}

.open .accordionItemContent {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  width: 100%;
  margin: 0px 0px 10px 0px;
  display: block;
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: top;
  -o-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -o-transition: -o-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  transition: transform 0.4s ease;
  box-sizing: border-box;
}

.open .accordionItemHeading {
  margin: 0px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #bdc3c7;
  color: #7f8c8d;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="accordionWrapper">
    <div class="accordionItem open">
      <h2 class="accordionItemHeading">About accordions</h2>
      <div class="accordionItemContent">
        <p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
        <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
      </div>
    </div>

    <div class="accordionItem close">
      <h2 class="accordionItemHeading">Accordion items</h2>
      <div class="accordionItemContent">
        <p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
        <p>You can include any content you want inside an accordion item. Here's a bullet list:</p>
        <ul>
          <li>List item #1</li>
          <li>List item #2</li>
          <li>List item #3</li>
        </ul>
      </div>
    </div>

    <div class="accordionItem close">
      <h2 class="accordionItemHeading">How to use a JavaScript accordion</h2>
      <div class="accordionItemContent">
        <p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
      </div>
    </div>
  </div>
  <script src="custom.js"></script>
</body>

</html>

答案 1 :(得分：1)

当您将代码从“草率模式”（无严格模式）转换为严格模式时，以前的一些错误（在草率模式下可接受的错误被视为错误）严格的模式。

这就是您的代码无效的原因。

错误：

“i” 的,.循环中使用的变量未定义，并被视为  严格模式中的错误。

在控制台中调试会出现此错误：

  

“message”：“未捕获的ReferenceError：我未定义”，

解→

for (i = 0; i < accHD.length; i++)

应改为

for (var i = 0; i < accHD.length; i++)

或

for (let i = 0; i < accHD.length; i++)

我还想澄清一点，因为let是块作用域，这是两个不同的变量（只是具有相同的名称）。你也可以打电话给第二个j来避免混淆。

此图片将进一步清除您的疑虑→

enter image description here

建议进一步阅读

我还建议你了解一些前进的概念。

  1. suggested reading #1
  2. suggested reading #2
  3. 还要研究closure

    4. 此外，

    您可以详细了解strict mode here on this page。

相关问题
最新问题