Question

您好，我有一个像这样的脚本

$(document).ready(function() { 

      // TODO: Make class toggle logic more efficient

      // Global variables
      var maxChoiceCount = 2;

      // DOM elements
      var choiceItems   = document.querySelectorAll(".boxParent li");
      var maxCountLabel = document.getElementById("max-count");

      // Update max count label
      maxCountLabel.textContent = maxChoiceCount;

      // Checklist item handler
      var checkItem = function() {
        activeItems = document.querySelectorAll(".boxParent li.active");

        if (activeItems.length === maxChoiceCount) {
          if (this.className === "active") {
            this.className = "";
          }
        } else {
          if (this.className === "active") {
            this.className = "";
          } else {
            this.className = "active";
          }
        }
      }

      // Handle logic to enforce max count
      for (var i = 0, l = choiceItems.length; i < l; ++i) {
        choiceItems[i].onclick = checkItem
      }
    });

该功能仅用于为选定的<li>提供标记。我把这个脚本放在index.js中，我在我的html页面上调用它：

<script src="js/index.js"></script>

并且它不起作用，它在控制台中出错并且这样说：

**index.js:22 Uncaught ReferenceError: activeItems is not defined**

但是当我复制脚本并放入html内部时，它可以正常工作。

为什么我不能将它存储在index.js上？

我不喜欢在我的HTML中添加许多脚本。

这是小提琴。 https://jsfiddle.net/ddnvraf8/

Answer 1

尝试在var行添加activeItems = document.querySelectorAll(".boxParent li.active");。

var activeItems = document.querySelectorAll(".boxParent li.active");

因为它似乎没有初始化。

Answer 2

问题就像删除帖子的其他人一样。我没有添加 var 在activeItems = document.querySelectorAll（＆＃34; .boxParent li.active＆＃34;）; 所以它必须var activeItems = document.querySelectorAll(".boxParent li.active");为什么你删除你的帖子老兄不能竖起大拇指。

Answer 3

您收到此错误的可能原因是您将JavaScript文件放在Strict mode中，禁止使用任何全局变量。由于activeItems被声明为全局严格模式，因此会给出错误：

未捕获的ReferenceError：未定义activeItems

注意，在严格模式下意味着你的JS文件中有"use strict";，通常在顶部：

"use strict";

// Other code

在普通的JavaScript（ not in strict-mode ）下，尽管全局变量通常被称为不良做法，但在这种情况下，代码在功能上可以正常工作并且没有错误。解决方案是将变量设为local：

var activeItems = ... ;

Answer 4

请使用代码段：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">.box{
  max-width:240px;
}
.box h4{
    margin: 4px 15px;
}
.boxParent li:last-child{
  border-bottom: solid thin #d8d8d8
}
.boxParent li.active:after{
    content: "\2713";
    color: #F8E74E;
}

.boxParent li:after {
    background: #fff;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 24px;
}
.boxParent li.active {
    background: #fff;
    font-weight: 700;
}</style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="box">
  <div class="box-header">
    <h4>Categories</h4>
  </div>
  <div class="boxCaption">
    <h3 style="display:none;">Select up to <span id="max-count">0</span> choices</h3>
    <ul class="boxParent">
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor </li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit </li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum </li>
    </ul>
  </div>
</div>
</body>
</html>

在index.js中：

 $(document).ready(function() { 

          // TODO: Make class toggle logic more efficient

          // Global variables
          var maxChoiceCount = 2;

          // DOM elements
          var choiceItems   = document.querySelectorAll(".boxParent li");
          var maxCountLabel = document.getElementById("max-count");

          // Update max count label
          maxCountLabel.textContent = maxChoiceCount;

          // Checklist item handler
          var checkItem = function() {
            activeItems = document.querySelectorAll(".boxParent li.active");

            if (activeItems.length === maxChoiceCount) {
              if (this.className === "active") {
                this.className = "";
              }
            } else {
              if (this.className === "active") {
                this.className = "";
              } else {
                this.className = "active";
              }
            }
          }

          // Handle logic to enforce max count
          for (var i = 0, l = choiceItems.length; i < l; ++i) {
            choiceItems[i].onclick = checkItem
          }
        });

希望这能解决您的问题。感谢。

Answer 5

activeItems = document.querySelectorAll（＆＃34; .boxParent li.active＆＃34;）;

您的变量未声明。

var activeItems = document.querySelectorAll（＆＃34; .boxParent li.active＆＃34;）;

无法将脚本放在jQuery

5 个答案: