Question

目前，我的网站上有一个javascript搜索栏，可根据作为其名称的div分类文本搜索图像。

但是我计划有几百张不适合一页的图片，这就是我在网站上添加页面的原因，这就是我的问题。

我如何允许用户无论他们在哪个页面上使用搜索栏从其他页面搜索图像并将这些数据显示在当前页面上

我想尝试这样做而不设置一个后端数据库，这是我认为这是朝向的地方，如果有人有任何解决方案，请按我的方式拍摄。

下面将是我的索引的html和css，因为第二页与图像的第一页相同。我的所有图像都是本地托管的，所以如果你想在codepen上运行一个例子，只需注释，我就会设置它。

＆＃13;

<script>


$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        val = val.split(" ").join("\\ ");
        console.log(val)
        $("img[alt*=" + val + " i]").show();
    }
});

$(".img").wrap('<div class="alt-wrap"/>');

$(".img").each(function() {
    $(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
  })
   
</script>

＆＃13;

/* Website Title */
h1 {
	color: red;
}	
/* Website desciption */
h2 {
	color:red;
}
/* Text */
p {
	font-family: Arial;
}
/* Website body */
body {
	background-color: grey;
}
/*Navigation Bar */
ul {
	list-style-type: none;
	margin: 0;
	padding: 10px;
	overflow: hidden;
	background-color: black;
}

li {
	float: left;
	border-right: 1px solid white;
	padding: 10px;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding-right: 10px;
	padding-bottom: 5px;
	text-decoration: none;
	text-transform: upercase;
	font-size: 30px;
}

li:last-child {
	border-right: none;
}

ul li:hover:not(.active) {
	background-color: #555;
	color: white;
}

.active {
	background-color: red;
}

/* Search Bar */
input[type=text] {
    width: 200px;
	height: 50px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
	font-size: 30px;
}

/* Cool code but not needed atm
input[type=text]:focus {
    width: 100%;
	float: left;
}
*/

/* Keeps images inline */	
.alt-wrap { 
      display: block;
      position: relative;
      margin: 20px;
      color: whitesmoke;
      border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
      position: absolute;
      opacity: 0; /* hide initially */
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 15px;
      font-size: 14px;
      line-height: 22px;
      background-color: rgba(0,0,0,0.8);
      transition: all 300ms ease;
      transition-delay: 300ms;
}

.alt-wrap:hover > p.alt { 
      opacity: 1; 
      transition-delay: 0s;
}
    
.imgContainer{
    float:left;
}

img {
	width: 200px !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%);
}

.dl {
margin-top: 400px; 
}

/* For links for the pages */
.pagination a {
	color: black;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
}


/* Styling current page buttons */
.pagination a.active {
	background-color: #4CAF50;
	color: white;
}

/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}


/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */

#footer {
	position: relative;
	margin-top: -10px; /*Must equal negative value of the footer height */
	height: 10px;
	clear: both;
	padding-top: 20px;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}
/* End of forcing footer to the bottom*/

＆＃13;

<html>
	<title>Cryptos Explained</title>
	
	<head>
		<!-- Links to my CSS document -->
		<link href="style.css" type="text/css" rel="stylesheet" />
		
		<!-- My main heading -->
		<h1 align=center>Cryptos Explained</h1>
		
		<!-- My Sub-heading -->
		<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
		
		<!-- Allows me to have jquery code at the bottom of the page -->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
		
		<!-- Kind of makes it mobile friendly -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		
			<header>
				<!-- Navigation bar -->
				<ul>
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Vocabulary</a></li>
					<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
				</ul>
			</header><br>
			
	<body>
		<!--Lots of Div classes so I can seperate the main and the footer -->
		<div id="wrap">
			<div id="main" class="clearfix">
				<!-- All my images -->
				<div class="image123">
				
					<div class="imgContainer">
						<a href="cryptos/generic.html"><img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div></a>
					</div>
						
					<div class="imgContainer">
						<a href="#"><img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div></a>
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div></a>
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div></a>
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div></a>
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div></a>
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div></a>
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div></a>   
					</div>
					
					<div class="imgContainer">
						<a href="#"><img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div></a>   
					</div>
					
			</div>
				<!-- Pages -->
				<div id="footer">
					<div class="pagination" align="center">
						<a href="#">&laquo;</a>
						<a class="active" href="#">1</a>
						<a href="page2.html">2</a>
						<a href="#">3</a>
						<a href="#">4</a>
						<a href="#">&raquo;</a>
					</div>
				</div>
    
		</div>
	
	</body>

</html>

＆＃13;

如何检查其他页面上的对象，但显示在当前页面上

0 个答案: