使用IIFE時未定義jQuery
[英]jQuery not defined when using IIFE
問題描述
我正在嘗試在包含數組及其對象的頁面上實現Livesearch列表，並使用搜索框過濾匹配項，僅顯示搜索項的匹配項，
我遇到的問題是，當使用forEach遍歷數組項並嘗試將結果附加到DOM時，
jQuery未定義
本質上，代碼應獲取數組，遍歷數組，獲取建築物名稱，並將每個名稱作為h4項追加到.list DIV中。
//testItemsArray //array will contain objects used in the mockup for a livesearch function on the map pages. var testItemsArray = [{ id: '1', building: 'building1' }, { id: '2', building: 'building2' }, { id: '3', building: 'building3' }, { id: '4', building: 'building4' }, { id: '5', building: 'building5' }]; (function($) { $search = $('#searchbox'); // This is used for the filter input field var buildingList = '', buildingh4 = ''; testItemsArray.forEach(function(buildings) { buildingh4 = "<h4>" + buildings.building + "</h4>"; buildingList += buildingh4 $('.list').html(buildingList); }); }(jQuery));
<html lang="en"> <head> <script src="./js/list.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Main Page</title> </head> <body> <div class="container" id="search"> <header class="header"> <h1>University Of Lincoln Map Search</h1> <h2></h2> </header> <div class="logo"> <p>This page is to be used for the locating of campus buildings and rooms</p> </div> <div class="info"> <div class="list"> ********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** ***** </div> </div> <div class="key"> <div class="key-bg"></div> <div class="key-text"><span><h2>Find the room you are looking for</h2></span></div> <hr> </div> <div class="footer"> <p>map</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
3 個解決方案
解決方案1
1 2019-02-26 12:12:39
您應該在關閉body標簽之前放置這行代碼。 代替使用IIFE，使用document.ready
在代碼中，你把你的list.js之前jquery.min.js ，這就是為什么你jQuery是undefined錯誤。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
var testItemsArray = [{ id: '1', building: 'building1' }, { id: '2', building: 'building2' }, { id: '3', building: 'building3' }, { id: '4', building: 'building4' }, { id: '5', building: 'building5' }]; $(document).ready(function() { $search = $('#searchbox'); // This is used for the filter input field var buildingList = '', buildingh4 = ''; testItemsArray.forEach(function(buildings) { buildingh4 = "<h4>" + buildings.building + "</h4>"; buildingList += buildingh4 $('.list').html(buildingList); }); });
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Main Page</title> </head> <body> <div class="container" id="search"> <header class="header"> <h1>University Of Lincoln Map Search</h1> <h2></h2> </header> <div class="logo"> <p>This page is to be used for the locating of campus buildings and rooms</p> </div> <div class="info"> <div class="list"> ********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** ***** </div> </div> <div class="key"> <div class="key-bg"></div> <div class="key-text"><span><h2>Find the room you are looking for</h2></span></div> <hr> </div> <div class="footer"> <p>map</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./js/list.js"></script> </body> </html>
解決方案2
0 2019-02-26 12:16:52
將您的js引用放在<!-- listJS cdn link--> <script src="./js/list.js"></script>
在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>下面的Jquery庫引用之后
解決方案3
-1 2019-02-26 12:12:51
您應該對Jquery庫有一個引用。
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
“`TypeError`：使用IIFE時拋出`[0,1]`不是函數”
[英]“`TypeError`: `[0,1]` is not a function” is thrown when using an IIFE
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.