Q&A
提示しているソースのファイル名は何ですか？
実現したいこと
HTML,JavaScriptで画像をクリック時に文字を切り替えたい
発生している問題・分からないこと
画像をクリックすると別のhtmlに飛ぶ機能はできました。
飛んだ先のHTMLで画像ごとに別の販売情報を表示する機能を実装したいのです。
（例）4種類の販売品があったとして、4種類の品の画像を用意してグリッド上に並べてあるのを想像してください。個々の要素には画像、商品の名前、大きさ、どんなものかの説明などの情報が含まれます。1番目の画像をクリックしたらその詳細を記載したHTMLに飛ぶようにしたいのですがどのように実装すれば良いか分からない状態です。HTMLを4種類用意すればできないことはないですがもっと単純な実装方法があればその構造を知りたいのです。イメージとしてはid毎に対応する情報に書き換える感じです。初心者なので分かりやすく説明してくださるとありがたいです。また、以下のプログラムは必要最小限のコードです。
該当のソースコード
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>STORN SHOP</title> 6 </head> 7 <body> 8 <header> 9 <h1>STORN SHOP</h1> 10 </header> 11 <main> 12 <div class="container"> 13 <div class="element item1"> 14 <img src="./img/item1.png"> 15 <p>アイテム1です。</p> 16 </div> 17 <div class="element item2"> 18 <img src="./img/item2.png"> 19 <p>アイテム2です。</p> 20 </div> 21 </div> 22 </main> 23 <footer> 24 </footer> 25 26 <script> 27 const element = document.getElementsByClassName('element'); 28 29 for (let i = 0; i < element.length; i++) { 30 element[i].addEventListener('click', function() { 31 window.location.href = './item.html'; 32 }); 33 } 34 </script> 35 </body> 36</html>
item.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>STORN ITEM</title> 6 <link rel="stylesheet" href="./itemstyle.css"> 7 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 8 </head> 9 <body> 10 <p id="text">Item1の詳細ページです。</p> 11 12 <script> 13 const el = document.querySelector("#text"); 14 15 // 別のHTMLファイル（example.html）を読み込む 16 fetch('index.html') 17 .then(response => response.text()) 18 .then(htmlText => { 19 // 読み込んだHTMLをDOMとして解析 20 const parser = new DOMParser(); 21 const doc = parser.parseFromString(htmlText, 'text/html'); 22 23 // もしクリックされたボタンが1つ目のアイテムだった場合 24 25 26 // 別のHTML内の特定のクラス名（例: .target-class）を取得 27 const targetElement1 = doc.querySelector('.item1'); 28 const targetElement2 = doc.querySelector('.item2'); 29 30 if(targetElement1 == doc.querySelector('.item1')) 31 { 32 //jQuery利用 33 $('#text').html('Item1の詳細ページです。'); 34 } 35 else if(targetElement2 == doc.querySelector('.item2')) 36 { 37 //jQuery利用 38 $('#text').html('Item2の詳細ページです。'); 39 } 40 }); 41 42 </script> 43 </body> 44</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
「HTMLを操作する言語」と検索したところJavaScript言語でHTML表示の操作ができることがわかりました。ソースコードを自分なりに変更しましたが表示を切り替えることが出来ませんでした。
結果は以下です。
一つ目の画像をクリックすると、ItemのHTMLに飛び「Item1の詳細ページです。」
二つ目の画像をクリックすると、ItemのHTMLに飛び「Item1の詳細ページです。」
補足
環境はローカル環境でVSCodeを使用しています。
HTML,JavaScriptを使用して実務を想定したポートフォリオ作成をしています。
回答2件
0
自己解決
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>STORN SHOP</title> 6 <!-- jQuery CDN --> 7 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 8 </head> 9 <body> 10 <header> 11 <h1>STORN SHOP</h1> 12 </header> 13 <main> 14 <div class="container" id="p1"> 15 <div class="elementToggle item1" data-order="A0001"> 16 <img class="unit1" src="./img/item1.png"> 17 <p class="unit2">アイテム1</p> 18 <p class="unit3">¥1,000</p> 19 </div> 20 <div class="elementToggle item2" data-order="A0002"> 21 <img class="unit1" src="./img/item2.png"> 22 <p class="unit2">アイテム2</p> 23 <p class="unit3">¥2,000</p> 24 </div> 25 </div> 26 <div class="container1" id="p2"> 27 <img id="detailImage" src="./img/item1.png"> 28 <p id="detailName">アイテム1</p> 29 <p id="detailPrice">¥1,000</p> 30 <p id="detailOrderNo">発注番号：A0001</p> 31 <button class="xbutton"> 32 戻る 33 </button> 34 </div> 35 </main> 36 <footer> 37 </footer> 38 39 <script> 40 41 init(); 42 43 document.querySelectorAll('.elementToggle').forEach(function(btn) 44 { 45 btn.addEventListener('click', function() 46 { 47 // 品がクリックされたとき、p1を非表示にしてp2を表示する 48 document.getElementById('p1').style.display = "none"; 49 document.getElementById('p2').style.display = "block"; 50 51 // header/footer非表示 52 document.querySelector('header').style.display = "none"; 53 document.querySelector('footer').style.display = "none"; 54 55 // クリックされた要素の内容を取得 56 const clickedId = this.getAttribute('data-order'); 57 setOrder(clickedId); 58 }); 59 }); 60 61 // 閉じるボタンを押すと初期状態にする 62 document.getElementById('p2').querySelector('.xbutton').addEventListener('click', function() { 63 init(); 64 document.querySelector('header').style.display = "block"; 65 document.querySelector('footer').style.display = "block"; 66 }); 67 68 const items = [ 69 { 70 id:"A0001", 71 name:"アイテム1", 72 price:"¥1,000", 73 image:"./img/item1.png" 74 }, 75 { 76 id:"A0002", 77 name:"アイテム2", 78 price:"¥2,000", 79 image:"./img/item2.png" 80 } 81 ]; 82 83 function setOrder(clickedId) 84 { 85 // クリックした商品を選択 86 const selectedItems = items.filter(item => item.id === clickedId); 87 if (selectedItems.length > 0) { 88 const selectedItem = selectedItems[0]; 89 90 // jQueryを使用して詳細情報を更新 91 $('#detailImage').attr('src', selectedItem.image); 92 $('#detailName').text(selectedItem.name); 93 $('#detailPrice').text(selectedItem.price); 94 $('#detailOrderNo').text("発注番号：" + selectedItem.id); 95 } 96 } 97 98 function init() 99 { 100 // 初期状態ではp1を表示し、p2を非表示にする 101 document.getElementById('p1').style.display = "block"; 102 document.getElementById('p2').style.display = "none"; 103 } 104 105 </script> 106 </body> 107</html>
まずはhtmlを2つ用意しないとできないことかを考えました。クリックした先の商品の詳細ページではヘッダーとフッターは表示しないことができるように記述をして修正を行いました。それができたらJavaScriptで表示の更新処理を考えました。次にjQueryに書き換えて今のプログラムになりました。
投稿2026/06/01 08:08
総合スコア311
素晴らしいです！
私のベストアンサーを取り消して、こちらを自己解決にしてください。
後から見た人が混乱するので。
0
Windows 11、Edge/Chrome/Firefoxで確認しました。
いろいろな方法があると思いますが、jQueryを使わなくてもできます。
index.html (13,17行目を変更、31行目に挿入)
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>STORN SHOP</title> 6 </head> 7 <body> 8 <header> 9 <h1>STORN SHOP</h1> 10 </header> 11 <main> 12 <div class="container"> 13 <div class="element" data-id="1"> 14 <img src="./img/item1.png"> 15 <p>アイテム1です。</p> 16 </div> 17 <div class="element" data-id="2"> 18 <img src="./img/item2.png"> 19 <p>アイテム2です。</p> 20 </div> 21 </div> 22 </main> 23 <footer> 24 </footer> 25 26 <script> 27 const element = document.getElementsByClassName('element'); 28 29 for (let i = 0; i < element.length; i++) { 30 element[i].addEventListener('click', function() { 31 sessionStorage.setItem("itemId", this.dataset.id); 32 window.location.href = './item.html'; 33 }); 34 } 35 </script> 36 </body> 37</html>
item.html (scriptタグを全面的に変更)
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>STORN ITEM</title> 6 <link rel="stylesheet" href="./itemstyle.css"> 7 </head> 8 <body> 9 <p id="text"></p> 10 11 <script> 12 const id = sessionStorage.getItem("itemId"); 13 const text = document.getElementById("text"); 14 15 if (id === "1") 16 { 17 text.innerHTML = "Item1の詳細ページです。"; 18 } 19 else if (id === "2") 20 { 21 text.innerHTML = "Item2の詳細ページです。"; 22 } 23 </script> 24 </body> 25</html>
投稿2026/05/30 11:38
編集2026/05/30 11:53総合スコア1850
回答いただきありがとうございます。試したところ意図した挙動はできましたが、@Lhankor_Mhyのおっしゃる通り、urlを一つにまとめるというのはシステム上不便な感じになりそうでした。今後の方向性としましては1つのHTML内で完結できるようにテストケースを進めようと思います。フォーマット（品画像、商品名、値段）ぐらいが分かれば取りあえずはクリア）のダミーデータ単位（container）を用意して、表示切替をすることで対応します。
また進捗があれば報告します。
回答ありがとうございます。
一つのHTMLで完結させることを意識しながら表示切替と、jQueryの機能を組み合わせて試したところ問題が解決しました！
せっかくテストコードを提示してくださったのでベストアンサーに選ばせていただきます。
解決おめでとうございます！
自分で回答を書いて「自己解決」にしたほうがいいですよ。
(後からでも変更できます)
コメントありがとうございます。自分の解決法を書いておきたいと思います。
あなたの回答
tips
プレビュー
