Question

我是构建HTML网站的新手，但我没有基本的编程知识。我将100个动画图像放到其他服务器上，然后将所有这些图像链接到我的HTML网站。例如：

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

如何编写java脚本搜索来过滤当前HTML页面中的图像？例如，当我在搜索栏中键入“泰迪熊”并单击图像按钮搜索时，它将查询并搜索该服务器中的泰迪熊图像？编写这些代码是否很困难，因为我尝试制作一个下拉列表来选择和链接这些图像，但仍无效。

Answer 1

您可以使用attribute contains选择器轻松实现此目的。您可以通过在单击按钮时附加文本框的值来构建选择器，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

当前页面中图像的javascript搜索功能

1 个答案: