當前頁面中圖像的javascript搜索功能

Question

我是構建HTML網站的新手，但我沒有基本的編程知識。我把100個的動畫圖像，另一臺服務器，我所有的圖片鏈接到我的HTML website.For例如：

<p> 
    <img src="http://.../abc/23118465.gif" alt="teddy bear"align="left" width="150" height="100" > 
</p> 

如何編寫Java腳本搜索在當前的HTML網頁過濾的圖像？例如，當我在搜索欄中輸入「泰迪熊」並單擊圖像按鈕搜索時，它將查詢並搜索來自該服務器的泰迪熊圖像？編寫這些代碼是很困難的，因爲我試圖製作一個下拉列表來選擇並鏈接這些圖片，但仍然無法使用。

Answer 1

使用attribute contains選擇器可以很容易地達到此目的。您可以通過添加一個文本框的值，單擊按鈕時，這樣建立的選擇：

$('form').submit(function(e) { 
 
    e.preventDefault(); 
 
    $('p img').hide(); 
 
    $('p img[alt*="' + $('#search').val() + '"]').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="search" /> 
 
    <button id="go"> Search</button> 
 
</form> 
 
<p> 
 
    <img src="http://.../abc/23118465.gif" alt="teddy bear" align="left" width="150" height="100"> 
 
</p> 
 
<p> 
 
    <img src="http://.../abc/23118465.gif" alt="grizzly bear" align="left" width="150" height="100"> 
 
</p> 
 
<p> 
 
    <img src="http://.../abc/23118465.gif" alt="polar bear" align="left" width="150" height="100"> 
 
</p>