Question

我正在做一个项目，要求我将一个搜索栏添加到一个包含学生姓名和电子邮件地址列表的页面，一旦提交表单，只显示在搜索栏中输入了字符的学生。地址或学生姓名。

到目前为止，我附加了搜索栏，并启动了一个函数，用于侦听按钮上的click事件，并将输入中的值添加到变量中。

我以为我可以做一个if语句，检查列表项是否包含我创建的输入变量，然后添加一个类，然后我可以再做一个if if语句，以便根据它包含的类隐藏或显示。

$(document).ready(function() {
//set number of students to show on each page 
var inputValue;
var showStudents = 10;
//append search bar to the page
$(".page-header").append('<div class="student-search"><input placeholder="Search for students..."><button>Search</button></div>');
//add pagination to the page
$(".page").append('<div class="pagination"><ul></ul></div>');

//make page display 10 students at a time

//make search input only show students that contain that letter.
//use contains to add an ID?/class? to the student list item that matches the value in the input field.
//display the students that have said ID/class and hide the others. 
$("button").click(function() {
    //store the value of the input search into a variable
    inputValue = $("input").val();
    console.log(inputValue);
    //filter the list items by the input value and add CSS


        if ('.student-details h3:contains(inputValue)') {
        $('.student-details h3').addClass('showstudent')
    }
});

}）;

显然我的问题是，一旦我写这个，它将类添加到所有.student-details h3项目，而不仅仅是包含inputValue的项目，我不能使用“this”，因为它只是将类添加到按钮。这是编码的最佳方法吗？我应该只将我的学生列表转换为数组并使输入的值搜索数组并将结果返回到新数组中吗？我有点迷失在这里！谢谢你的帮助。

Answer 1

您可以尝试这种方法：

$key

学生搜索项目jquery / javascript

1 个答案: