JavaScriptの定義について

前提・実現したいこと

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ここにより詳細な情報を記載してください。

m.ts10806

2019/03/06 02:14

コードブロックが適用されてないので修正願います。 ```JavaScript ``` ↑行頭で改行も入れることあと、htmlもないことには再現確認できませんので、別コードブロックでご提示いただけますか

Lhankor_Mhy

2019/03/06 02:17

クリックイベントの設定のやり方をお聞きになっている、と理解しましたが、それでよろしいですか？

退会済みユーザー

2019/03/06 02:45

はい。Link Clickを定義したいのですか定義の仕方がわからないので回答よろしくお願いします。

Lhankor_Mhy

2019/03/06 02:53

jQuery でのイベント設定でよろしいのでしょうか？

退会済みユーザー

2019/03/06 02:57

j Queryのイベント設定だとどんな感じになりますか？

Lhankor_Mhy

2019/03/06 02:59

http://alphasis.info/2013/11/jquery-api-on-events-fn/ こんな感じです。

退会済みユーザー

2019/03/06 03:05

これをJavaScriptで書くことは可能ですか？

m.ts10806

2019/03/06 03:09

回答してるのご確認を。ただコピペコードではなくデバッグの仕方とヒント回答です。

Lhankor_Mhy

2019/03/06 03:16

これはJavaScriptです。

Lhankor_Mhy

2019/03/06 03:17

ん？　もしかしてバニラなJavaScript、という意味ですか？

m.ts10806

2019/03/06 03:21

たぶん色んなところから持ってきて切り貼りしてグチャグチャになってるやつですね。 onclickで直接関数呼び出してるところからバニラで間違いなさそうです。

退会済みユーザー

2019/03/06 03:25

そうです

Lhankor_Mhy

2019/03/06 03:31

ということは、関数の定義の仕方が知りたい、ということですか？

yoorwm

2019/03/06 03:31

ぶっちゃけ、グチャグチャすぎて人に聞けないレベルですね。 Javascriptのチュートリアルとかでも見つけて、基本から学びなおすべきです。

Lhankor_Mhy

2019/03/06 03:43

> mts10806さんその割に、jQueryを読み込んでたりするので…… たしかに、コピペキメラなんでしょうね。

退会済みユーザー

2019/03/06 04:06

このサイトのように作成したいのですが大きい画像が切り替わるのではなくページ全体が変わってしまいます。 https://www.google.co.jp/amp/s/codingmania.net/jquery/399.html/amp

Lhankor_Mhy

2019/03/06 04:10

「ページ全体が変わってしまいます」とは具体的には何が起きていますか？というか、具体的な問題があるなら、「書き方を教えて欲しい」じゃなくて、それを早く言ってほしかった……

m.ts10806

2019/03/06 04:15

質問内の要件を具体的に記載されたほうが良さそうです。「Link clickの定義の仕方、使い方」ではなく「○○ということをしたい。（クリックしたら○○が○○になるように）」という書き方にしてください。「Link clickの定義の仕方」だけだと「関数の使い方」だけに回答が集中して、本来やりたいことには近づきませんよ。

退会済みユーザー

2019/03/06 04:16

サイトのプログラムを実行すると小さい画像をクリックした時にサムネイルの画像が変わるのではなくページ全体が切り替わってしまって画像一枚だけが表示される状態です。

m.ts10806

2019/03/06 04:17

>ページ全体が切り替わってしまって画像一枚だけが表示される状態です。それ、画像リンクになっているだけでは。その現象を再現するコードを提示して、自身が対応したい仕様を質問本文に明記してください。

Lhankor_Mhy

2019/03/06 05:47 編集

> html0711さん mts10806さんの回答とコメント、ちゃんと読んでますかね？お返事されないのは、何か意図があってのことですか？それはそれとして、ご提示のコードで「ページ全体が切り替わってしまって画像一枚だけが表示される状態」という問題が再現しませんでした。ご提示されていない部分のコードに原因があるかと思います。ご質問者が実行されているコードをご提示ください。

m.ts10806

2019/03/06 11:31

何か気に障ること言ったかな・・・。この展開で退会するのも若干謎です。コピペコードもらえなかったから機嫌損ねたということでしょうかね。（そういう作業依頼請け負うサイトでないことは分かってそうには思ったのですが・・・）

Lhankor_Mhy

2019/03/06 11:38

なんか、また悪者になった感…… 詰めているつもりはないんだけどなあ。

行動規範の内容に同意します

回答2件

<script src="js"></script>

もし提示のJavaScriptコードを外部ファイルに記述しているならこの記述では読み込めません。
ブラウザ開発ツールのコンソールを確認するとエラーになっていはずですね。

きちんとこのHTMLからのパスを書きましょう。
CSSも同じですね。

あと、コードが全くインデントがつけられていないので非常に読みづらいですし、
開始・閉じの{}の位置関係が分かりづらいです。
インデントをきちんとつけてください。
自動フォーマット機能があるエディタを使ってもいいですし、フォーマットサービスもあります。

※フォーマットサービス利用結果

js
1$(function LinkClick(abc) {
2	var thumbs = document.querySelectorAll('.thumb');
3	for (var i = 0; i < thumbs.length; i++) {
4		thumbs[i].onclick = function LinkClick(abc) {
5			document.getElementById('bigimg').src = this.dataset.image;
6
7			switch (abc) {
8				case 0:
9					thumbs.src = "a1.jpg";
10					break;
11				case 1:
12					thumbs.src = "a2.jpg";
13					break;
14				case 2:
15					thumbs.src = "a3.jpg";
16					break;
17				case 3:
18					thumbs.src = "a4.jpg";
19					break;
20				default:
21					thumbs.src = "a4.jpg";
22					break;
23			}
24		};
25	}
26})
27