不能把腳本中的jQuery

你好，我有這樣的不能把腳本中的jQuery

$(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/

來源

2016-07-10 renat natanael

你把在jquery腳本調用之後？ – Gokigooooks

是否有任何內容匹配查詢HTML中的「」.boxParent「li.active」？ –

yap。它的匹配.boxParent li.active到我的html，我把index.js放在jquery.min.js之後 –

嘗試在activeItems = document.querySelectorAll(".boxParent li.active");行上添加var行。

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

因爲它似乎沒有初始化。

來源

2016-07-10 02:47:00

雖然我在javascripting上只是個新手，所以我認爲添加'var'將有助於定義變量。 –

添加'var'使其成爲局部變量，如果沒有它，變量就是全局變量，那就是o非常不同。 –

@SpencerWieczorek 謝謝。但是讓它成爲全球性的，那麼這意味着外面已經有了一個被宣稱的價值？ –

問題就像其他人刪除他的帖子。我沒有添加var in activeItems = document.querySelectorAll（「。boxParent li.active」）; 所以它必須var activeItems = document.querySelectorAll(".boxParent li.active");爲什麼你刪除你的郵政老兄不能豎起大拇指。

來源

2016-07-10 02:52:04

我按錯了鏈接。：v –

大多數（如果不是所有的話）瀏覽器都允許你聲明一個沒有var變量的變量。它只是把var放在全局範圍內。請注意，這是非常糟糕的形式，應該避免。如有必要，使用window.varName添加到全局範圍。因爲你看到這個錯誤，聽起來你的文件處於嚴格模式。這不允許以你所做的方式宣佈全局變量。更多有關：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode – jmealy

@JohnAtNotion我不確定這一點，但不是必須有''使用strict 「;'爲了使用嚴格模式？如果是的話，我會認爲是直接應對他們的代碼，而不是添加任何東西。但是，如果是這樣的話，這種挑戰可以解釋錯誤。 –

您得到此錯誤的可能原因是因爲您要將您的JavaScript文件放入Strict mode，該文件禁止使用任何全局變量。由於activeItems被宣佈全球範圍內嚴格模式將給錯誤：

Uncaught ReferenceError: activeItems is not defined

注意嚴格模式是指你在你的JS文件有"use strict";某處，通常在頂部：

"use strict"; 

// Other code

在正常的JavaScript（ 不是嚴格模式），儘管全局變量通常被認爲是不好的做法，但您的代碼在功能上在這種情況下功能相同，並且沒有錯誤。該解決方案將是使局部變量：

var activeItems = ... ;

來源

2016-07-10 03:33:22

請使用代碼片段：

<!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 
      } 
     });

希望這能解決你的問題。謝謝。

來源

2016-07-10 04:57:49

activeItems = document.querySelectorAll（「。boxParent li。主動「）;

您的變量未申報

VAR activeItems = document.querySelectorAll（」 boxParent li.active 「）;

來源

2016-07-10 05:40:02

不能把腳本中的jQuery

回答

相關問題