Question

我正在尝试为我的图片添加一个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或其他内容，因此当人们使用搜索栏进行搜索时，只会保留包含这些字母的示例。

Answer 1

你可以用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让它看起来很慢但实际上很快。您还可以使搜索大小写不敏感。

**编辑**

根据其他要求：

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

添加不区分大小写的标记＆＃39; i＆＃39;在选择器的正则表达式部分内部使其不区分大小写：

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

逃避空间：

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

属性选择器中的

使间隔属性可以通过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%);
}

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

图片的有效搜索栏

1 个答案: