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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1824閲覧

特定(img、li、option)の要素を連動させたい

terataimn

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/08/06 01:43

実現したいこと

・liとoptionを連動させる。
・liをクリックまたはoptionを選択で.mainのimg srcとaltを連動して選択中のli(img src、alt)に変更させる。
・.box1、.box2のようにページ内には同一のhtml構成が複数存在する。

該当のソースコード

html

1<html> 2 <head> 3 <style> 4 ul{display:flex; list-style:none;margin:0;padding:0;} 5 ul li {margin-right:10px;width:50px} 6 ul li img{width:100%;} 7 </style> 8 </head> 9 <body> 10 <div class="box1"> 11 <div class="main"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></div> 12 13 <div class="select-wrap"> 14 <select> 15 <option>text 1</option> 16 <option>text 2</option> 17 <option>text 3</option> 18 <option>text 4</option> 19 <option>text 5</option> 20 </select> 21 </div> 22 23 <ul> 24 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></li> 25 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2" alt="text 2"></li> 26 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" alt="text 3"></li> 27 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4" alt="text 4"></li> 28 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" alt="text 5"></li> 29 </ul> 30 </div> 31 32 <hr> 33 34 <div class="box2"> 35 <div class="main"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></div> 36 37 <div class="select-wrap"> 38 <select> 39 <option>text 1</option> 40 <option>text 2</option> 41 <option>text 3</option> 42 <option>text 4</option> 43 <option>text 5</option> 44 </select> 45 </div> 46 47 <ul> 48 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></li> 49 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2" alt="text 2"></li> 50 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" alt="text 3"></li> 51 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4" alt="text 4"></li> 52 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" alt="text 5"></li> 53 </ul> 54 </div> 55 56 </body> 57</html>

試したこと

js

1jQuery('select').change(function() { 2var elm1 = document.querySelector('ul li img'); 3var target1 = document.querySelector('.main img'); 4target1.setAttribute('src', elm1.sr); 5});

追記

「Image Picker」というプラグインを使用しましたが、複数にすると意図したことができませんでした。

Image Picker
https://rvera.github.io/image-picker/

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

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

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

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

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

gentaro

2019/08/06 01:48

「こうしたい」「こう作った」まではわかるんですけど、質問したいポイントが書かれていないように思いますが。
m.ts10806

2019/08/06 01:52

Image Pickerはどのように導入されたのでしょうか。
guest

回答2

0

Image Picker を使ってみましたが、複数でもとくに問題は起こりません。

HTML

1<div class="box1"> 2 <div class="main"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></div> 3 <select class="image-picker"> 4 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" data-img-alt="text 1" data-img-class="first">text 1</option> 5 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2" data-img-alt="text 2">text 2</option> 6 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" data-img-alt="text 3">text 3</option> 7 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4" data-img-alt="text 4">text 4</option> 8 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" data-img-alt="text 5" data-img-class="last">text 5</option> 9 </select> 10</div> 11<div class="box2"> 12 <div class="main"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></div> 13 <select class="image-picker"> 14 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" data-img-alt="text 1" data-img-class="first">text 1</option> 15 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2" data-img-alt="text 2">text 2</option> 16 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" data-img-alt="text 3">text 3</option> 17 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4" data-img-alt="text 4">text 4</option> 18 <option data-img-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" data-img-alt="text 5" data-img-class="last">text 5</option> 19 </select> 20</div>

jQuery

1$("select.image-picker").imagepicker({ 2 hide_select: false 3}); 4 5$('select').on('change', function(event) { 6 var src = $('option:selected', event.target).attr('data-img-src'); 7 var img = $('img', $(this).prev()); 8 console.log(img, src); 9});

投稿2019/08/06 02:30

x_x

総合スコア13749

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

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

terataimn

2019/08/07 08:43

ありがとうございました。
guest

0

ベストアンサー

こんな感じで

javascript

1<style> 2ul{display:flex; list-style:none;margin:0;padding:0;} 3ul li {margin-right:10px;width:50px} 4ul li img{width:100%;} 5</style> 6<script> 7$(function(){ 8 $('.box li img').on('click',function(){ 9 var src=$(this).attr('src'); 10 var alt=$(this).attr('alt'); 11 $(this).closest('.box').find('.main img').attr({src,alt}); 12 $(this).closest('.box').find('.select-wrap select').val(alt) 13 }); 14 $('.box select').on('change',function(){ 15 var idx=$(this).prop('selectedIndex'); 16 var src=$(this).closest('.box').find('li img').eq(idx).attr('src'); 17 var alt=$(this).closest('.box').find('li img').eq(idx).attr('alt'); 18 $(this).closest('.box').find('.main img').attr({src,alt}); 19 }); 20}); 21</script> 22 <div class="box1 box"> 23 <div class="main"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></div> 24 <div class="select-wrap"> 25 <select> 26 <option>text 1</option> 27 <option>text 2</option> 28 <option>text 3</option> 29 <option>text 4</option> 30 <option>text 5</option> 31 </select> 32 </div> 33 <ul> 34 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" alt="text 1"></li> 35 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2" alt="text 2"></li> 36 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" alt="text 3"></li> 37 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4" alt="text 4"></li> 38 <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" alt="text 5"></li> 39 </ul> 40 </div> 41 <hr> 42 <div class="box2 box"> 43 <div class="main"><img src="https://placehold.jp/ff0000/ffffff/150x150.png?text=image1" alt="text 1"></div> 44 <div class="select-wrap"> 45 <select> 46 <option>text 1</option> 47 <option>text 2</option> 48 <option>text 3</option> 49 <option>text 4</option> 50 <option>text 5</option> 51 </select> 52 </div> 53 <ul> 54 <li><img src="https://placehold.jp/ff0000/ffffff/150x150.png?text=image1" alt="text 1"></li> 55 <li><img src="https://placehold.jp/ff0000/ffffff/150x150.png?text=image2" alt="text 2"></li> 56 <li><img src="https://placehold.jp/ff0000/ffffff/150x150.png?text=image3" alt="text 3"></li> 57 <li><img src="https://placehold.jp/ff0000/ffffff/150x150.png?text=image4" alt="text 4"></li> 58 <li><img src="https://placehold.jp/ff0000/ffffff/150x150.png?text=image5" alt="text 5"></li> 59 </ul> 60 </div> 61

投稿2019/08/06 02:09

yambejp

総合スコア114572

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

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

terataimn

2019/08/06 02:26

お手数おかけしました。実現したいことができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問