用另一个Div替换Div

Question

我有这个我想做的事情.我有一张地图的主要图片,在该地图中有区域.这些区域上有热点,因此您可以单击它们,它将仅用区域替换整个地图.(只是一个简单的div交换).

我需要它作为一个div因为在这里div我有热点列出.

总共有4个divs我需要这样做.

如果有人能帮助我那将是非常棒的!

因此,表中列出的链接需要单独替换图像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>

我不允许发布图片,因为我没有足够的分数,所以我知道图片链接不起作用.

Answer 1

您可以使用 .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>

Answer 2

HTML

<div id="replaceMe">i need to be replaced</div>
<div id="iamReplacement">i am replacement</div>

JavaScript的

jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));