搜索替代文本，隐藏与 jQuery / JavaScript 的不匹配

Question

我正在尝试对图像页面进行基本的站点搜索。搜索功能应该遍历特定类中的每个元素，在图像的 alt 文本中寻找匹配的单词。

我认为我的问题是将函数绑定到表单提交，但我似乎无法弄清楚我哪里出错了。

我已经用 jQuery 尝试过这个（小提琴：http://jsfiddle.net/u2oewez4/）

$(document).ready(function(){
$("#search-form").click(function() {

var searchQuery = "Text";

$.each('.single-image', function(){
$(this).children("img").attr("alt"):contains(searchQuery).hide("slow");
});
});
});

以及 JavaScript (fiddle:http://jsfiddle.net/m3LkxL1c/)

function submitSearch(){

// create regex with query
var searchQuery = new RegExp(document.getElementById('search-input').value);  

// create array of content to look for query in    
var content = document.getElementsByClassName("single-image");   

// create an array to put the results to hide in 
var hideResults = [];     

var imagesToHide = document.getElementsByClassName("single-image-hide");  

// get the current display value
var displaySetting = imagesToHide.style.display;              


for (i=0; i<content.length; i++) {
if (! searchQuery.test(content[i].firstChild.firstChild.nodeValue)) {   

// if the query not found for this result in query
hideResults.push(content[i]);           

// push to the hideResults array
content[i].className = "single-image-hide";   

// change class name so CSS can take care of hiding element
document.getElementById("form-success").style.display = 'inline-block';
alert(searchQuery); // for debugging
return false; // results will not stick without this?
}
}

// set display to hidden
if(displaySetting == 'inline-block'){
imagesToHide.style.display = 'none';          // map is visible, so hide it
}
else{
imagesToHide.style.display = 'inline-block';  // map is hidden so show it
}
}

仅供参考，我已经在几个 StackOverflow 线程上构建了 JQuery，所以我确实尽我所能找到了一个类似的例子。 （类似功能：here，和here）

Answer 1

好的，各种错误修复，其中大部分我已经在 cmets 中指出，因为我想确保不会错过任何错误。您需要更仔细地阅读jQuery documentation 中的详细信息。这将解决您遇到的许多问题，例如使用错误的each 函数。其他的事情会随着时间而来。继续学习，阅读文档。

$("#search-form").click(function() {
    //this gets the val for the search box, then puts the Imgs in a variable so we don't have to use the selector multiple times. Selectors are expensive time-wise, stored variables are not.
    var searchQuery = $("#search-text").val(),
        singleImgs = $('.single-image');

    //you have to show the images for each new iteration, or they'll remain hidden
    singleImgs.show();
    singleImgs.each(function(){
        //get alt attribute
        var thisAlt = $(this).find("img").attr("alt");
        //if thisAlt does not contains searchQuery (use > instead of === for does)
        if(thisAlt.indexOf(searchQuery) === -1){
            $(this).hide();                
        }
    });
});

working fiddle