Question

作为学习JavaScript的项目的一部分，我目前正在建立一个网站，该网站具有50多个代表学生的html列表项，并编写一个.js文件以将所有项分页到10个页面中，搜索功能，可根据其姓名过滤哪些学生显示。

以下是这些列表项的示例：

<li class="student-item cf">
    <div class="student-details">
        <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg">
        <h3>lucy hall</h3>
        <span class="email">lucy.hall@example.com</span>
    </div>
    <div class="joined-details">
           <span class="date">Joined 09/11/16</span>
   </div>
</li>

我编写的用于分页列表项目的功能很好用，但是我在实现搜索/过滤器功能方面很挣扎。这是我为搜索编写的代码：

//------------------------SEARCH CONTENT OPEN--------------------------------//
//adding elements for the search bar
let searchBar = document.createElement('div.student-search');
let searchField = document.createElement('input');
$(searchField).attr('placeholder', 'Search for students...');
let searchButton = document.createElement('button');
$(searchButton).append('Search');

$('div.page-header').append(searchBar);
$(searchBar).append(searchField);
$(searchBar).append(searchButton);

// Variables for search functionality
let $filter = $(searchField).val().toLowerCase();
let $names = $($fullList).children('h3');

$(searchBar).on('keyup', (event) => {
    $($names).filter(() => {
        $(this).toggle($(this).text().toLowerCase().indexOf($filter) > -1);
    });
});
//--------------------SEARCH CONTENT CLOSE-------------------------------//

将此代码添加到我的网站上，除了添加到页面上的搜索栏元素之外，对列表项，它们的分页方式或网站上的其他任何内容都没有影响。

我认为这可能与我收到的一个非常奇怪的错误有关，因为我是如何显示和隐藏学生的。这是我的操作方式：

function showPage(list, page){
        for(var i = 0; i <= list.length; i+= 1){
            let currentStudent = list[i];
            let studentMin = page * 10;
            let studentMax = studentMin + 9;

            // Arrays for jQuery targets
            let showList = [];
            let hideList = [];

            if(i >= studentMin && i <= studentMax){
                showList.push(currentStudent);
            }else{
                hideList.push(currentStudent);
            }

            // adding hide to the old students and fading in the new students
            $(hideList).hide();
            $(showList).fadeIn();
        }
    }

在包含.hide（）;的行中；我收到此错误：

jQuery.Deferred异常：无法读取未定义Type的属性'style'

我在调用showPage函数的父函数的任何一行代码上，之后的每一行都不会运行。例如，当我将父函数放在实现搜索栏的代码之前时，该代码甚至不会创建变量或添加元素，但是如果我将父函数放在所有内容的末尾，它将运行，但不会运行。功能正常。

使用jQuery过滤分页列表项

0 个答案: