我正在尝试向我的图像添加 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>
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%);
}
下图显示了可搜索的比特币和比特币现金，以及带有可点击叠加层的对齐图像:
关于javascript - 图像的主动搜索栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48180339/