搜索替代文本，隱藏與jQuery/JavaScript不匹配

我想實現一個基本的網站搜索頁面的圖像。搜索功能應該通過特定類中的每個元素，在圖像的替代文本中尋找單詞匹配。搜索替代文本，隱藏與jQuery/JavaScript不匹配

我覺得我的問題是將函數綁定到表單提交，但我似乎無法弄清楚我出錯的地方。

我與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（小提琴：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 
} 
}

FYI我已經建立了JQuery的關一些StackOverflow線程，所以我絕對盡我所能找到一個類似的例子。（類似的功能：here和here）

來源

2014-08-28 Michelle

好了，有幾個問題馬上。你有多個具有相同ID的元素。這不起作用。每個id只有一個元素，每個元素只有一個id，id是唯一的。如果您想要多個樣式相同或要同時選中的元素，請使用類。 – 2014-08-28 03:31:38

method =「post」將通過信息從表單發送信息。如果您要發送數據以供服務器端語言（如PHP）使用，這非常有用。在這裏，你甚至不需要表單元素。 – 2014-08-28 03:33:56

我正在輸入答案。您也正在使用錯誤的每個功能。您應該首先使用選擇器來處理jQuery對象數組。 – 2014-08-28 03:40:43

好的，各種錯誤修復，其中大部分我已在評論中註明，因爲我想確保不會錯過任何錯誤。您需要仔細閱讀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

來源

2014-08-28 03:49:16

謝謝！這是非常有用的，並且完美地工作。我很欣賞你在評論中添加上下文，因爲在JQuery中我沒有想到過這麼少的經驗。 – Michelle 2014-08-28 19:23:15

搜索替代文本，隱藏與jQuery/JavaScript不匹配

回答

相關問題