Question

我正在尝试在页面上实现一个Livesearch列表，在该页面上它需要一个数组及其对象，并通过使用搜索框来过滤匹配项，仅显示搜索项的匹配项，

我遇到的问题是，使用forEach遍历数组项并尝试将结果附加到DOM时，

未定义jQuery

基本上，代码应抓取数组，遍历数组，抓取建筑物名称，并将每个名称作为.list项附加到h4 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>

Answer 1

您应该在关闭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>

Answer 2

放入您的js参考  <script src="./js/list.js"></script>

下面的Jquery库引用之后 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

您应该具有对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

Check here for references

使用IIFE时未定义jQuery

3 个答案: