質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

12061閲覧

クリックで画像を切り替えたい

MoeNakashima

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/01/24 05:08

編集2018/01/24 05:23

つい最近jQueryのコピペをやめて一からJavaSpriptの勉強をはじめ自分でいろいろなものをつくってみています。

サムネイル画像をクリックするたびにメインの画像が切り替わるようにしたいと思っています。

HTML

1<div id="main-wrapper"> 2 <a href=""><img src="../images/img01.jpg" class="on" id="img1"></a> 3 <a href=""><img src="../images/img02.jpg" class="off" id="img2"></a> 4 <a href=""><img src="../images/img03.jpg" class="off" id="img3"></a> 5 <a href=""><img src="../images/img04.jpg" class="off" id="img4"></a> 6</div> 7<div class="sub-wrapper"> 8 <input type="image" src="../images/img01.jpg" name="img1" checked onclick="img1()"> 9 <input type="image" src="../images/img02.jpg" name="img2" onclick="img2()"> 10 <input type="image" src="../images/img03.jpg" name="img3" onclick="img3()"> 11 <input type="image" src="../images/img04.jpg" name="img4" onclick="img4()"> 12</div>

CSS

1#main-wrapper .on { 2 display: block; 3} 4#main-wrapper .off { 5 display: none; 6}

JavaScript

1function img1(){ 2 document.getElementById("img1").className="on"; 3 document.getElementById("img2").className="off"; 4 document.getElementById("img3").className="off"; 5 document.getElementById("img4").className="off"; 6} 7function img2(){ 8 document.getElementById("img1").className="off"; 9 document.getElementById("img2").className="on"; 10 document.getElementById("img3").className="off"; 11 document.getElementById("img4").className="off"; 12} 13function img3(){ 14 document.getElementById("img1").className="off"; 15 document.getElementById("img2").className="off"; 16 document.getElementById("img3").className="on"; 17 document.getElementById("img4").className="off"; 18} 19function img4(){ 20 document.getElementById("img1").className="off"; 21 document.getElementById("img2").className="off"; 22 document.getElementById("img3").className="off"; 23 document.getElementById("img4").className="on"; 24}

自分でできる限り考えて作ってみたのですが非常に長くなってしまいました。
他にもっと短く書ける書きかたを教えてください。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

つけたり消したりするより、mainに1つしか表示しないならmainのimgのsrcを
付け替えるほうがよいのでは?(必要ならそれを囲むアンカーのhrefも)

またinputのtype=imageのcheckedはあまりよいインタフェースではないと思います
data-*形式たとえばdata-checkedのようなパラメータを利用して
処理するのが妥当ではないですか?

投稿2018/01/24 05:31

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

例えばこんな

HTML

1<div id="main-wrapper"> 2 <a href=""><img src="../images/img01.jpg" class="on" id="img1"></a> 3 <a href=""><img src="../images/img02.jpg" class="off" id="img2"></a> 4 <a href=""><img src="../images/img03.jpg" class="off" id="img3"></a> 5 <a href=""><img src="../images/img04.jpg" class="off" id="img4"></a> 6</div> 7<div class="sub-wrapper"> 8 <input type="image" src="../images/img01.jpg" name="img1"> 9 <input type="image" src="../images/img02.jpg" name="img2"> 10 <input type="image" src="../images/img03.jpg" name="img3"> 11 <input type="image" src="../images/img04.jpg" name="img4"> 12</div> 13<style> 14.on{} 15.off{display:none;} 16</style>

JavaScript

1"use strict"; 2{ 3 const imgs = [].slice.call(document.querySelectorAll("#main-wrapper>a>img")); 4 document.querySelector(".sub-wrapper").addEventListener("click", e => { 5 if(e.target.type != "image"){return;} 6 imgs.forEach(img => img.className = e.target.name == img.id ? "on" : "off"); 7 }); 8}

投稿2018/01/24 05:24

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

一旦全部offにして、特定の要素だけonにすればいいのではないでしょうか?以下試していませんが多分いけると思います。

js

1function chgImg(n){ 2 Array.prototype.forEach.call( 3 document.getElementsByTagName("img"), 4 function(elm,ind,arr){ 5 elm.className = "off"; 6 } 7 ); 8 document.getElementById("img"+n).className = "on"; 9}

img1()などは、chgImg(n)に変えてください。

上記以外にも、document.querySelectorを使ったりなど、いろいろ方法は考えられると思います。

nは要素の位置から割り出したりもできますが、とりあえず指定する形としました。

投稿2018/01/24 05:23

編集2018/01/24 05:25
namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問