jQueryトレーニング① サムネイル画像の切替

jQuery

ここ最近djangoの世界にばかり没頭していたので、思い出す意味も込めてjQueryの復習を始めました。

ゴール目標

作成した動画を見るのが手取り早いので載せます。

ポイント

  • 各サムネイルをクリックすると、クリックされた画像を右に大きく表示する

環境構築

jsfiddleを使用します。

https://jsfiddle.net/

ピンク線で囲った、JavaScript+jQuery3.4.1を使用します

jsfiddleってなんやねんって人は下記から確認ください。

またこの後出てくるplacehold.jpという便利なimg生成サイトの記述もあります。

https://freeheroblog.com/recommended-experiment-site/

これで環境はOKです。

コード

基本的には下記コードを貼り付ければ問題なく挙動します。

HTML

CSS

jQuery

ポイント

まず、ev.preventDefault()を使用してイベントの処理を制御しています。

これがないと続け様にサムネイルをクリックすると誤表示をしてしまいます。

またvar $targetで変数を定義して挙動をわかりやすくしました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です