用另一个 Div 替换当前的 Div

Question

我正在尝试做这件事情。我有一张地图的主图片，其中包含了很多区域。这些区域上有热点，可以点击它们并用该区域的图片替换整个地图（只是一个简单的div交换）。

我需要使用

，因为在这个

中我列出了所有的热点。

总共有4个

需要这样做。

如果有人能帮助我，那就太好了！

所以，表格中列出的链接需要替换另一个

中的图片。

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

我没有足够的分数来发布图片，所以我不能发布图片。我知道图片链接不起作用。

- Jake

---

我认为你应该添加一些你的代码。 - S L

@jake - 欢迎来到Stackoverflow。我有一个建议给你。最好能展示一些代码。比如问题出在哪里，或者你已经做了哪些尝试。这样回答问题的人也可以给你更好的答案。;) 干杯！ - Reigel Gallarde

谢谢啊，伙计们！你们的帮助和支持真的非常感谢！我现在就要更新它。 - Jake

基本上所有地区都应该一次只显示一个，在页面加载时加载所有地区的图像，然后当您单击链接时，它会更改为相应的图片。 - Jake

这段代码足够吗？ - Jake

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>

- Gowri

---

我需要一个链接来改变完全独立的Div，而不是文本本身。因此，单击链接，链接保持不变，但图像在它们之间更改。 - Jake

是的，这基本上就是我想要的，但是不要隐藏链接，而是使用图像。因此，有一个区域名称的常量列表。当您单击区域名称时，它会更改div中的图像。我在我的原始问题中放了一些代码，以说明我正在寻找的结构。非常感谢您的帮助。 - Jake

非常好用！谢谢。 - Vinícius

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'));

- Praveen Prasad

Answer 3

这个链接应该会对你有所帮助

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

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

#mainmapplace{
    width: 100px;
    height: 100px;
    background: red;
}

#region div{
    width: 100px;
    height: 100px;
    background: blue;
    margin: 10px 0 0 0;
}

- S L