jQuery 用另一个 Div 替换 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5062916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace Div with another Div
提问by Jake
I have this thing I m trying to do. I have a main picture of a map and within that map there are regions. These regions have hot spots on them so you can click them and it will replace the whole map with only the region. (just a simple divswap).
我有我正在尝试做的事情。我有一张地图的主要图片，并且在该地图中有区域。这些区域上有热点，因此您可以单击它们，它将仅用该区域替换整个地图。（只是一个简单的div交换）。
I need it as a divbecause in this divi have the hot spots listed.
我需要它作为一个，div因为在这里div我列出了热点。
There are a total of 4 divs that I am going to need to do this with.
我总共需要使用 4div秒来完成此操作。
If anyone could help me that would be awesome!
如果有人可以帮助我，那就太棒了！
So links that are listed in a table need to replace the image in a separate div.
因此，表中列出的链接需要替换单独的div.
<tr class="thumb"></tr>
<td>All Regions (shows main map) (link)</td>
</tr>
<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>
<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>
<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>
<div>All Regions image</div>
<div>northern image</div>
<div>southern image</div>
<div>Eastern image</div>
I am not allowed to post images because I don't have enough points so I know the image links wont work.
我不允许发布图片，因为我没有足够的积分，所以我知道图片链接不起作用。
回答by Gowri
You can use .replaceWith()
您可以使用 .replaceWith()
$(function() {
$(".region").click(function(e) {
e.preventDefault();
var content = $(this).html();
$('#map').replaceWith('<div class="region">' + content + '</div>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<div class="region"><a href="link1">region1</a></div>
<div class="region"><a href="link2">region2</a></div>
<div class="region"><a href="link3">region3</a></div>
</div>回答by Praveen Prasad
HTML
HTML
<div id="replaceMe">i need to be replaced</div>
<div id="iamReplacement">i am replacement</div>
JavaScript
JavaScript
jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));
回答by Santosh Linkha
This shouldhelp you
这应该可以帮助你
HTML
HTML
<!-- pretty much i just need to click a link within the regions table and it changes to the neccesary div. -->
<table>
<tr class="thumb"></tr>
<td><a href="#" class="showall">All Regions</a> (shows main map) (link)</td>
<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>
<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>
<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>
<br />
<div id="mainmapplace">
<div id="mainmap">
All Regions image
</div>
</div>
<div id="region">
<div class="replace">northern image</div>
<div class="replace">southern image</div>
<div class="replace">Eastern image</div>
</div>
JavaScript
JavaScript
var originalmap;
var flag = false;
$(function (){
$(".replace").click(function(){
flag = true;
originalmap = $('#mainmap');
$('#mainmap').replaceWith($(this));
});
$('.showall').click(
function(){
if(flag == true){
$('#region').append($('#mainmapplace .replace'));
$('#mainmapplace').children().remove();
$('#mainmapplace').append($(originalmap));
//$('#mapplace').append();
}
}
)
})
CSS
CSS
#mainmapplace{
width: 100px;
height: 100px;
background: red;
}
#region div{
width: 100px;
height: 100px;
background: blue;
margin: 10px 0 0 0;
}
