商城点击换图片 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换图片</title>

<style>
	*{margin: 0;padding: 0;}
	img{width:200px;height:290px;border:5px solid #FFF;}	
	.x{border:5px solid green;}

</style>
<script src="jquery-1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="mo">
	<img src="images/1.jpg" alt="">	
</div>

<hr>

<hr>

<div id="dx">
	<img src="images/2.jpg" alt="">	
	<img src="images/3.jpg" alt="">	
	<img src="images/4.jpg" alt="">	
	<img src="images/5.jpg" alt="">	
</div>

<script>
	
	$('#dx img').click(function(){
		// 移除所有图片的边框
		$('#dx img').removeClass('x');
		// 给当前对象 加上边框
		$(this).addClass('x');
	})

	
	$('#dx img').click(function(){
		// 通过 边框 class=x  找到替换的    
		$('#dx img[class=x]').clone().replaceAll('#mo img').removeClass('x');
	})			

</script>

</body>
</html>

　　

posted @ 2016-09-07 15:34  多幸运1号  阅读(254)  评论(0)    收藏  举报