私がやろうとしているこのことがあります。地図のメイン画像があり、その地図の中に地域があります。これらの地域にはホットスポットがあるため、クリックすると、マップ全体が地域のみに置き換えられます。 (単純なdiv
スワップ)。
このdiv
にはホットスポットがリストされているため、div
として必要です。
合計4つのdiv
sがあり、これを使用する必要があります。
誰かが私を助けることができれば、それは素晴らしいでしょう!
そのため、表にリストされているリンクは、個別の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>
十分なポイントがないため、画像を投稿することはできません。画像リンクは機能しません。
.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>
[〜#〜] html [〜#〜]
<div id="replaceMe">i need to be replaced</div>
<div id="iamReplacement">i am replacement</div>
JavaScript
jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));
これ should あなたを助ける
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;
}