个人中心
gpt4 book ai didi

javascript - 图像的主动搜索栏

转载 作者：行者123 更新时间：2023-12-03 02:44:04 25 4
gpt4 key购买 nike

我正在尝试向我的图像添加 ID，以便我可以搜索大量图像。
我有 CSS，这样我的图像就可以对齐
我的 HTML

<html>
	<title>WhitePaper Repository</title>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet" />
		<h1 align=center>Header</h1>
		<h2 align=center>Sub-Header</h2>
		<script type="text/javascript" src="search.js"></script>
		<input type="text" id="myinput" onkeyup="myFunction()" name="search" placeholder="Search..">
	</head>
	<body>
		<div id="images">
			<a href="https://example.com"><img src="img/btc.png" alt="Bitcoin"></a>
			<a href="https://example.com"><img src="img/ethereum.png" alt="Ethereum"></a>
			<a href="https://example.com"><img src="img/ripple.png" alt="Ripple"></a>
			<a href="https://example.com"><img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"></a>
			<a href="https://example.com"><img src="img/ada.png" alt="Cardano"></a>
			<a href="https://example.com"><img src="img/nem.png" alt="NEM"></a>
			<a href="https://example.com"><img src="img/Litecoin.png" alt="LiteCoin"></a>
			<a href="https://example.com"><img src="img/stellar.png" alt="Stellar Lumens"></a>
			
		</div>
	</body>
</html>

我的 JavaScript

<script>
function myFunction() {
 
    var input, filter, div, a, img, i;
    input = document.getElementById('myinput');
    filter = input.value.toUpperCase();
    div = document.getElementById("images");
    a = ul.getElementsByTagName('a');


    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

我希望能够为每个图像添加 id 或其他内容，这样当人们使用搜索栏进行搜索时，仅保留包含字母的示例。

最佳答案

您可以使用 Jquery 来完成此操作。 

<html>
<head>
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
</head>
<body>
<input type="text" id="myinput" name="search" placeholder="search..." style="width:200px; height: 40px; border-radius: 4px; font-size: 18px;"><br>
<div id="images">
            <a href="https://example.com"><img src="http://vu.hn/images/BitcoinCashLogo.png" alt="Bitcoin" width=130></a>
            <a href="https://example.com"><img src="https://www.ethereum.org/images/logos/ETHEREUM-LOGO_PORTRAIT_Black_small.png" alt="Ethereum" width=130></a>
            <a href="https://example.com"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" alt="Ripple" width=130></a>
            <a href="https://example.com"><img src="https://i.redd.it/tsmzy49d4adz.jpg" alt="Bitcoin Cash" width=130></a>
            <a href="https://example.com"><img src="https://themerkle.com/wp-content/uploads/cardano.jpg" alt="Cardano" width=130></a>
            <a href="https://example.com"><img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" alt="NEM" width=130></a>
            <a href="https://example.com"><img src="https://bitkee.com/icons/litecoin-logo.png" alt="LiteCoin" width=130></a>
            <a href="https://example.com"><img src="http://bittrust.s3.amazonaws.com/1486429998.png" alt="Stellar Lumens" width=130></a>
</div>
</body>
</html>

<script>
$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        $("img[alt*=" + val + "]").show();
    }
});
</script>

enter image description here

GIF 看起来很慢，但实际上很快。您还可以使搜索不区分大小写。

** 编辑 **

根据其他要求:

使其不区分大小写，并且属性中的空格可搜索:

在选择器的正则表达式部分中添加不区分大小写标志“i”使其不区分大小写:

$("img[alt*=" + val + " i]").show();

以及转义空格:

val = val.split(" ").join("\\ ");

in 属性选择器使间隔属性可由 jquery 搜索。这是为了解释 Jquery 的类似 API 的选择器语法，它允许我们定位间隔属性。新代码是:

$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        val = val.split(" ").join("\\ ");
        $("img[alt*=" + val + " i]").show();
    }
});

使用 CSS 和可点击叠加层对齐图像:

这可以使用以下方法来完成:

<div class="image123">
    <div class="imgContainer">
        <a href="https://example.com"><img src="images/bit_logo.png" alt="Bitcoin" width=130><div class="overlay"><div class="text">Bitcoin</div></div></a>   
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="images/ethereum_logo.png" alt="Ethereum" width=130><div class="overlay"><div class="text">Ethereum</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="images/ripple_logo.png" alt="Ripple" width=130><div class="overlay"><div class="text">Ripple</div></div></a>
    </div>
</div>

...以及适当的样式:

.imgContainer{
    float:left;
}
img {
width: 120px !important; 
}
body {
background: white !important; 
}
.imgContainer {
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.imgContainer:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

下图显示了可搜索的比特币和比特币现金，以及带有可点击叠加层的对齐图像:

enter image description here

关于javascript - 图像的主动搜索栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48180339/

25 4 0
文章推荐： javascript - 将参数设置为方法的属性
文章推荐： dart - 错误 : The getter 'ltr' isn't defined for the class 'TextDirection'
文章推荐： android - 无法在 gradle 中使用 GradleUserHomeScopeServices.createFileAccessTimeJournal() 错误创建 FileAccessTimeJournal 类型的服务
文章推荐： javascript - 为新项目初始化功能的最佳实践是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com