javascript - 学生搜索项目 jquery/javascript

Question

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

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

我认为我可以执行一个 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

您可以尝试这种方法:

$('.student-details h3').each(function() {
    if ($(this).text() == inputValue) {
        $(this).addClass('showstudent');
    }
}