選択したリスト項目に応じて複数の画像のsrcを一度に変更する方法

Question

自分のサイトの一部として車の画像（サムネイル）を選択しています。 4種類の色と、色を選択する選択リストがあります。私はリスト上の異なる色を選択して、6つの画像のうち4つが変化し、異なる色になるようにしたいと考えています。

私はこれを研究して画像を切り替えることができる方法を見つけましたが、私が何をするにしても同じ画像にしか変更できないので、複数のsrcsを使用することはできません。添付画像および選択リストのための コード：

<ul class="slides"> 
      <li data-thumb="images/audi/red/au.jpg" name="audi"> 
       <div class="thumb-image"> <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> </div> 
      </li> 
      <li data-thumb="images/audi/red/au1.jpg" name="audi1"> 
       <div class="thumb-image"> <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> </div> 
      </li> 
      <li data-thumb="images/audi/red/au2.jpg" name="audi2"> 
       <div class="thumb-image"> <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> </div> 
      </li> 
      <li data-thumb="images/audi/red/au3.jpg" name="audi3"> 
       <div class="thumb-image"> <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> </div> 
      </li> 
      <li data-thumb="images/audi/au4.jpg"> 
       <div class="thumb-image"> <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> </div> 
      </li> 
      <li data-thumb="images/audi/au4a.jpg"> 
       <div class="thumb-image"> <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> </div> 
      </li> 
      </ul> 
<li>Select a Colour: 
    <select name="car-colour" id="car-colour"> 
    <option value="red">Red</option> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
    <option value="blue">Blue</option> 
</select></li> 

Answer 1

は、あなたがこのような何かを行うことができます。

$("#car-colour").change(function() { 
 
self=$(this); 
 
targets=$('.slides li').each(function() { 
 
if($(this).index()<4) { 
 

 
dthumb=$(this).data('thumb').split('/'); 
 

 
dthumb[2]=self.val(); 
 
final=dthumb.join('/'); 
 
$(this).attr('data-thumb',final); 
 
$(this).find('img').attr('src',final); 
 
} 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="slides"> 
 
      <li data-thumb="images/audi/red/au.jpg" name="audi"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/red/au1.jpg" name="audi1"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/red/au2.jpg" name="audi2"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/red/au3.jpg" name="audi3"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/au4.jpg"> 
 
       <div class="thumb-image"> <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/au4a.jpg"> 
 
       <div class="thumb-image"> <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> </div> 
 
      </li> 
 
      </ul> 
 
<li>Select a Colour: 
 
    <select name="car-colour" id="car-colour"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="black">Black</option> 
 
    <option value="blue">Blue</option> 
 
     </select></li>

は、生成されたHTMLを確認してください。画像フォルダに色の名前が付いている場合、これは機能するはずです。

Answer 2

Download jQueryとあなたのフォルダ内のjQueryを追加し、HTMLにコードを追加します。

<script src="jquery-3.1.1.js"></script> 

あなたはそれのためのjQueryを使用して一つの機能を使用することができます.attr最初にすべてのオプション値に対して一意のIDを指定し、すべての画像を1つのクラスに入れることができます：

<li>Select a Colour: 
     <select id="picID"> 
     <option value="red" selected>Red</option> 
     <option value="white">White</option> 
     <option value="black">Black</option> 
     <option value="blue">Blue</option> 
     </select></li> 

と1クラス（あなたがするローカル画像を使用することができます）内のすべての画像を追加：リファレンスhere

$('#car-colour').change(function() { 
    var val = parseInt($('#picID').val()); 
    $('img').attr("src",picList[val]); 
}); 

：

var picList = [ 
"images/1.jpg", 
"images/2.jpg", 
"images/3.jpg", 
]; 

と後。あなたがそのままあなたのURL構造を維持する場合は

Answer 3

あなたは色の適切なディレクトリ構造を維持していると言いました。これはあなたのために働くかもしれません。

$("#car-colour").change(function(){ 
 
    var color = $(this).val().trim(); 
 
    $("li").each(function(index){ 
 
    if(index > 3) return; 
 
    var arr = $(this).attr('data-thumb').trim().split('/'); 
 
    arr.splice(2,1, color); 
 
    var newImgSrc = arr.join('/'); 
 
    $(this).attr('data-thumb', newImgSrc); 
 
    $(this).find('img').attr('src', newImgSrc); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="slides"> 
 
    <li data-thumb="images/audi/red/au.jpg" name="audi"> 
 
    <div class="thumb-image"> 
 
     <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> 
 
    </div> 
 
    </li> 
 
    <li data-thumb="images/audi/red/au1.jpg" name="audi1"> 
 
    <div class="thumb-image"> 
 
     <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> 
 
    </div> 
 
    </li> 
 
    <li data-thumb="images/audi/red/au2.jpg" name="audi2"> 
 
    <div class="thumb-image"> 
 
     <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> 
 
    </div> 
 
    </li> 
 
    <li data-thumb="images/audi/red/au3.jpg" name="audi3"> 
 
    <div class="thumb-image"> 
 
     <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> 
 
    </div> 
 
    </li> 
 
    <li data-thumb="images/audi/au4.jpg"> 
 
    <div class="thumb-image"> 
 
     <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> 
 
    </div> 
 
    </li> 
 
    <li data-thumb="images/audi/au4a.jpg"> 
 
    <div class="thumb-image"> 
 
     <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<li>Select a Colour: 
 
    <select name="car-colour" id="car-colour"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="black">Black</option> 
 
    <option value="blue">Blue</option> 
 
    </select> 
 
</li>

Answer 4

この試してみてください。そして、 `$（jQueryのを使用識別できるように、各` `要素のためのユニークな` id`を与える

$(document).ready(()=>{ 
 
    $('#car-colour').change(function() { 
 
     let newColor = this[this.selectedIndex].value; 
 
     $('img').attr('src', (index, src)=>{ 
 
      return src.replace(/red|white|black|blue/gi, newColor); 
 
     }) 
 
     $('li[data-thumb*=images]').attr('data-thumb', (index, src)=>{ 
 
      return src.replace(/red|white|black|blue/gi, newColor); 
 
     }) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="slides"> 
 
      <li data-thumb="images/audi/red/au.jpg" name="audi"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/red/au1.jpg" name="audi1"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/red/au2.jpg" name="audi2"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/red/au3.jpg" name="audi3"> 
 
       <div class="thumb-image"> <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/au4.jpg"> 
 
       <div class="thumb-image"> <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> </div> 
 
      </li> 
 
      <li data-thumb="images/audi/au4a.jpg"> 
 
       <div class="thumb-image"> <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> </div> 
 
      </li> 
 
      </ul> 
 
<li>Select a Colour: 
 
    <select name="car-colour" id="car-colour"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="black">Black</option> 
 
    <option value="blue">Blue</option> 
 
</select></li>