前提・実現したいこと
JavaScriptで定義をしたいのですがLink clickを定義するにはどのようにすればいいですか?
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ここに言語名を入力
ソースコード
JavaScript
1 2$(function LinkClick(abc){ 3 var thumbs = document.querySelectorAll('.thumb'); 4 for(var i = 0; i <thumbs.length; i++) { 5 thumbs[i].onclick = function LinkClick(abc) { 6 document.getElementById('bigimg').src = this.dataset.image; 7 8 switch(abc){ 9 case 0: 10 thumbs.src = "a1.jpg"; 11 break; 12 case 1: 13 thumbs.src = "a2.jpg"; 14 break; 15 case 2: 16 thumbs.src = "a3.jpg"; 17 break; 18 case 3: 19 thumbs.src = "a4.jpg"; 20 break; 21 default: 22 thumbs.src = "a4.jpg"; 23 break; 24 } 25 }; 26 } 27}) 28 29``` JavaScript 30 31``` HTML 32<!DOCTYPE html> 33<html lang="ja"> 34 <head> 35 <meta charset="utf-8"> 36 <title></title> 37 <link href="css" rel="stylesheet" type="text/css"> 38 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 39 <script src="js"></script> 40 </head> 41 <body> 42 <h1></h1> 43 <hr> 44 <ul id="list"> 45 <a href="javascript:void(0);" onclick="LinkClick(0);"> 46 <img src="a1.jpg" id="thumb1"></a> 47 <a href="javascript:void(0);" onclick="LinkClick(1);"> 48 <img src="a2.jpg" id="thumb2"></a> 49 <a href="javascript:void(0);" onclick="LinkClick(2);"> 50 <img src="a3.jpg" id="thumb3"></a> 51 <a href="javascript:void(0);" onclick="LinkClick(3);"> 52 <img src="a4.jpg" id="thumb4"></a> 53 <hr/> 54 </ul> 55 <img onclick = id="bigimg" attr src ="a1.jpg"> 56</body> 57</html> 58``` HTML 59 60 61### 試したこと 62 63ここに問題に対して試したことを記載してください。 64 65### 補足情報(FW/ツールのバージョンなど) 66 67ここにより詳細な情報を記載してください。
コードブロックが適用されてないので修正願います。
```JavaScript
```
↑行頭で改行も入れること
あと、htmlもないことには再現確認できませんので、別コードブロックでご提示いただけますか
クリックイベントの設定のやり方をお聞きになっている、と理解しましたが、それでよろしいですか?
はい。Link Clickを定義したいのですか定義の仕方がわからないので回答よろしくお願いします。
jQuery でのイベント設定でよろしいのでしょうか?
j Queryのイベント設定だとどんな感じになりますか?
これをJavaScriptで書くことは可能ですか?
回答してるのご確認を。
ただコピペコードではなくデバッグの仕方とヒント回答です。
これはJavaScriptです。
ん? もしかしてバニラなJavaScript、という意味ですか?
たぶん色んなところから持ってきて切り貼りしてグチャグチャになってるやつですね。
onclickで直接関数呼び出してるところからバニラで間違いなさそうです。
そうです
ということは、関数の定義の仕方が知りたい、ということですか?
ぶっちゃけ、グチャグチャすぎて人に聞けないレベルですね。
Javascriptのチュートリアルとかでも見つけて、基本から学びなおすべきです。
> mts10806さん
その割に、jQueryを読み込んでたりするので……
たしかに、コピペキメラなんでしょうね。
このサイトのように作成したいのですが大きい画像が切り替わるのではなくページ全体が変わってしまいます。
https://www.google.co.jp/amp/s/codingmania.net/jquery/399.html/amp
「ページ全体が変わってしまいます」とは具体的には何が起きていますか?
というか、具体的な問題があるなら、「書き方を教えて欲しい」じゃなくて、それを早く言ってほしかった……
質問内の要件を具体的に記載されたほうが良さそうです。
「Link clickの定義の仕方、使い方」ではなく「○○ということをしたい。(クリックしたら○○が○○になるように)」という書き方にしてください。
「Link clickの定義の仕方」だけだと「関数の使い方」だけに回答が集中して、本来やりたいことには近づきませんよ。
サイトのプログラムを実行すると小さい画像をクリックした時にサムネイルの画像が変わるのではなくページ全体が切り替わってしまって画像一枚だけが表示される状態です。
>ページ全体が切り替わってしまって画像一枚だけが表示される状態です。
それ、画像リンクになっているだけでは。
その現象を再現するコードを提示して、自身が対応したい仕様を質問本文に明記してください。
> html0711さん
mts10806さんの回答とコメント、ちゃんと読んでますかね?
お返事されないのは、何か意図があってのことですか?
それはそれとして、ご提示のコードで「ページ全体が切り替わってしまって画像一枚だけが表示される状態」という問題が再現しませんでした。
ご提示されていない部分のコードに原因があるかと思います。
ご質問者が実行されているコードをご提示ください。
何か気に障ること言ったかな・・・。
この展開で退会するのも若干謎です。
コピペコードもらえなかったから機嫌損ねたということでしょうかね。
(そういう作業依頼請け負うサイトでないことは分かってそうには思ったのですが・・・)
なんか、また悪者になった感……
詰めているつもりはないんだけどなあ。