※ ChatGPTを利用し、要約された質問です（原文：jqueryで要素を別要素に表示したいが重なる）
jqueryで要素を別要素に表示したいが重なる
このQ&Aのポイント
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>
お礼
ONEONE様 ありがとうございます！ 希望していた通りの動作になりました。 知識がないもので色々なサイトを調べたものの emptyやappendといったDOM操作があるということにさえ行き着きませんでした。 本当に感謝しています。有難うございました。