jqueryで要素を別要素に表示したいが重なる
jqueryには詳しくないのですが、必要に迫られて下記のようなページを制作しています。
構造
1）menu画像をクリックすれば gazouboxでその画像が大きく表示され、（A,B)
2）別のmenu画像をクリックすれば contentの画像が変わり、（a1,a2,a3 → b1,b2,b3)
3)contentの画像をクリックすれば itemshowのDiv内に画像名と同じｓｒｃ．htmlが表示され、
4）それとともに そのcartの内容がcartpanelに表示されます。
実際のページではcartの内容は ショッピングカートのscriptタグを記載します。
ネットで調べて悪戦苦闘しながら上記の構造で動作するところまで漕ぎつけたのですが、
このHTMLでは 「・・のカートタグ」という文字が順に表示されますが
私の製作中のページでは積み重なります。
cartpanelにショッピングカートが表示されて、同一場所に重なって表示されていくので、
クリックした分だけ商品価格の部分が重なって行って 価格が読み取れなくなります。
恐らく、非表示にしているcartを画像クリックでcartpanelに表示するとき、
画像のclassに設定したsrcを cartの処理に同じように使えていないのが問題だろうとは思うのですが、
何日もネット検索しながらいろいろ調べては試してみたものの 基礎知識がないため解決できませんでした。
ページの必要最低限を書き出してみました。
contents画像（．switchButton）をクリックしたら、
そのクリックした画像用の cart だけが cartpanel に表示され
別の画像をクリックしたら 次の画像用のカートに切り替わってくれるようにするには
プログラムをどのように修正すればよいでしょうか？
お手数かけますがご指導よろしくお願いいたします。
----------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title>無題ドキュメント</title>
<style type="text/css">
.full_content {
position: relative;
float: left;}
.switchButton {list-style-type: none;}
.menu{
width: 120px;
height: 120px;
list-style: none;
text-align: center;
display: block !important;
cursor: pointer;
border: 1px solid #F66;
margin-top: 3px;}
.menu:first-child {margin-left:0;}
.hover {
font-weight: bold;
display: block !important;}
.content {
width: 100px;
height: 200px;
position: absolute;
top: 250px;}
.cartpanel {
height: 200px;
width: 150px;}
.menu img {
height: 120px;
width: 120px;}
#gazoubox {
height: 200px;
width: 200px;
float: left;
border: 1px solid #6F6;
margin-bottom: 100px;}
</style>
<script type="text/javascript">
$(function () {
$('#big').attr('src', $('.menu img:first').attr('src'));
$('.menu img').click(function () {
$('#big').attr('src', $(this).attr('src'));
});
});
$ (function(){
$ (".content:not('.hover + .content')").hide();
$ (".menu").click(function(){
$(".menu").removeClass("hover");
$(this).addClass("hover");
$(".content:not('.hover + .content')").fadeOut();
$(".hover + .content").fadeIn();
});
});
$(document).ready(function(){
$('.itemshow').load('A.html');
$(".cart").css("visibility", "hidden");
$('.switchButton').click(function(){
var loadContents = $(this).attr('src');
$('.itemshow').load(loadContents+'.html');
($(this).find(".cart").css("visibility", "visible")).appendTo('.cartpanel');
});
});
</script>
<div id="gazoubox"><img id="big" /></div>
<div class="itemshow"></div>
<div class="cartpanel"></div>
<div class="full_content">
<div class="menu hover"><img src="img/A.jpg" /></div>
<div class="content">
<ul id="ilist">
<li class="switchButton" src="a1"><img src="img/a1.jpg" />
<div class="cart" src="a1">a1のカートタグ</div>
</li>
<li class="switchButton" src="a2"><img src="img/a2.jpg" />
<div class="cart" src="gk-pch-kuro">a2のカートタグ</div>
</li>
<li class="switchButton" src="a3"><img src="img/a3.jpg" />
<div class="cart" src="gk-pch-kuro">a3のカートタグ</div>
</li>
</ul></div>
<div class="menu"><img src="img/B.jpg" /></div>
<div class="content">
<ul id="ilist">
<li class="switchButton" src="b1"><img src="img/b1.jpg" />
<div class="cart" src="a1">b1のカートタグ</div>
</li>
<li class="switchButton" src="b2"><img src="img/b2.jpg" />
<div class="cart" src="b2">b2のカートタグ</div>
</li>
<li class="switchButton" src="b3"><img src="img/b3.jpg" />
<div class="cart" src="b3">b3のカートタグ</div>
</li>
</ul></div>
</div>
</body>
お礼
こんなプラグインがあるんですね！ 簡単に実現できました。 ありがとうございました。