更改图片来源onclick jQuery中的链接

时间：2018-09-27 07:09:51

标签： javascript jquery html 

$(document).ready(function(){
			$(".btn__close").click(function(){
				$(".sec4").hide();
			});
			$(".sec3__bx .preview").click(function(){
				var imgurl = $(".sec3__bx img").attr('src');
				$(".sec4__img").attr('src' , imgurl);
				$(".sec4").show();
			});
		});
.sec3__bx{
			background-color: white;
			padding: 10px;
		}
		.sec3__bx--item{
			background-color: #CAD3C8;
			text-align: center;
		}
		.sec3__bx--item,.sec3__bx--item a{
			color: #535c68;
		}
		/**secttion4**/
		.sec4{
			position: fixed;
			left: 50%;
			top: 50%;
			width: 100%;
			background-color: rgba(0,0,0,0.6);
			transform: translate(-50%,-50%);
			box-shadow:0px 0px 0px 100px rgba(0,0,0,0.6);
			z-index: 999;
			display: none;
		}
		.btn__close{
			position: absolute;
			right: 50px;
			top: -40px;
		}
		.btn__close i{
			font-size: 23px;
			background-color: white;
			width: 45px;
			height: 45px;
			border-radius: 50%;
			text-align: center;
			line-height: 45px;
			cursor: pointer;
		}
		.sec4__img{
			display: block;
			width: 60%;
			margin: 0 auto;
		}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid  bg-light">
		<div class="container">
			<div class="row pt-4 pb-4 row1">
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="https://ni.scene7.com/is/image/ni/cDAQ_16x9" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="	https://www.goodmanmfg.com/images/librariesprovider6/resized-images/gdm-indoor-air-quality.png" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="https://adn-static1.nykaa.com/media/catalog/product/k/a/kajal_5.jpg" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2018/02/19/Pictures/_0b5df294-1575-11e8-a4d7-7f47b8de9439.jpg" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  <!--section4-->
	<div class="sec4">
		<div class="btn__close"><i class="fa fa-close"></i></div>
		<img class="img-fluid sec4__img" src="img/s2.jpg">
	</div>

我在其中列出了产品列表，因此，当我单击“查看图像”图标时，图像src随我的隐藏图像src更改。 但是当我选择其他图像时，它不会用我的隐藏图像src更改图像src。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 .. 。 。 。 。 。 。 。 。

1 个答案:

答案 0 :(得分：2)

在$(this)中使用var imgurl = $(this).parent().parent().find('img').attr('src'); 

$(document).ready(function(){
			$(".btn__close").click(function(){
				$(".sec4").hide();
			});
			$(".sec3__bx .preview").click(function(){
				var imgurl = $(this).parent().parent().find('img').attr('src'); 
				$(".sec4__img").attr('src' , imgurl);
				$(".sec4").show();
			});
		});
.sec3__bx{
			background-color: white;
			padding: 10px;
		}
		.sec3__bx--item{
			background-color: #CAD3C8;
			text-align: center;
		}
		.sec3__bx--item,.sec3__bx--item a{
			color: #535c68;
		}
		/**secttion4**/
		.sec4{
			position: fixed;
			left: 50%;
			top: 50%;
			width: 100%;
			background-color: rgba(0,0,0,0.6);
			transform: translate(-50%,-50%);
			box-shadow:0px 0px 0px 100px rgba(0,0,0,0.6);
			z-index: 999;
			display: none;
		}
		.btn__close{
			position: absolute;
			right: 50px;
			top: -40px;
		}
		.btn__close i{
			font-size: 23px;
			background-color: white;
			width: 45px;
			height: 45px;
			border-radius: 50%;
			text-align: center;
			line-height: 45px;
			cursor: pointer;
		}
		.sec4__img{
			display: block;
			width: 60%;
			margin: 0 auto;
		}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid  bg-light">
		<div class="container">
			<div class="row pt-4 pb-4 row1">
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="https://ni.scene7.com/is/image/ni/cDAQ_16x9" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="	https://www.goodmanmfg.com/images/librariesprovider6/resized-images/gdm-indoor-air-quality.png" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="https://adn-static1.nykaa.com/media/catalog/product/k/a/kajal_5.jpg" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
				<!--col-->
				<div class="col-md-3 mb-3">
					<div class="sec3__bx">
						<img src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2018/02/19/Pictures/_0b5df294-1575-11e8-a4d7-7f47b8de9439.jpg" class="img-fluid" id="pro__img">
						<div class="sec3__bx--item p-2">
							<h4>Product Name</h4>
							<p>Buisness Volume: 0</p>
							<p>Sales Price: 0</p>
							<a class="preview" href="javascript:void(0);"><i class="fa fa-eye"></i> View</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  <!--section4-->
	<div class="sec4">
		<div class="btn__close"><i class="fa fa-close"></i></div>
		<img class="img-fluid sec4__img" src="img/s2.jpg">
	</div>

相关问题
最新问题