Замените Div другим Div

У меня есть эта вещь, которую я пытаюсь сделать. У меня есть основная картина карты, и внутри этой карты есть области. В этих регионах есть горячие точки, поэтому вы можете щелкнуть их, и он заменит всю карту только регионом. (просто простой обмен div).

Мне нужно это как div, потому что в этом div у меня есть список горячих точек.

Есть всего 4 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>

Мне не разрешено отправлять изображения, потому что у меня недостаточно очков, поэтому я знаю, что ссылки на изображение не работают.

Ответ 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>

Ответ 2

HTML

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

JavaScript

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

Ответ 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;
}