javascript - 无法将脚本放入 jQuery

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 中放很多脚本。

这是 fiddle 。 https://jsfiddle.net/ddnvraf8/

Answer 1

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

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

因为好像没有初始化。