実現したいこと
・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/
回答2件
あなたの回答
tips
プレビュー