<!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>
