it-swarm.com.de

Ersetze Div durch ein anderes Div

Ich habe das, was ich versuche zu tun. Ich habe ein Hauptbild einer Karte und innerhalb dieser Karte gibt es Regionen. Diese Regionen haben Hotspots, auf die Sie klicken können. Dadurch wird die gesamte Karte nur durch die Region ersetzt. (nur ein einfacher Tausch von div).

Ich brauche es als div, weil in diesem div die Hot Spots aufgelistet sind.

Es gibt insgesamt 4 divs, mit denen ich dies tun muss.

Wenn mir jemand helfen könnte, wäre das großartig!

In einer Tabelle aufgeführte Links müssen daher das Bild in einem separaten div ersetzen.

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

Ich darf keine Bilder posten, weil ich nicht genug Punkte habe, damit ich weiß, dass die Bildlinks nicht funktionieren.

31
Jake

Sie können .replaceWith() verwenden

$(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>
55
Gowri

HTML

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

JavaScript

jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));
13
Praveen Prasad

Dies sollte Ihnen helfen

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;
}
1
Santosh Linkha