javascript - 如何根据所选列表项一次更改多个图像的 src

Question

我在我的网站上选择了一些汽车图像(和缩略图)。有四种不同的颜色，以及一个用于选择颜色的选择列表。我希望能够在列表中选择不同的颜色，以便显示的 6 个图像中的 4 个发生变化，使它们具有不同的颜色。

我研究过这个并找到了可以切换图像的方法，但是无论我做什么我都只能将它们更改为同一个图像，我似乎无法使用多个src。附加图像和选择列表的代码:

<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

如果您保持 URL 结构不变，您可以执行以下操作:

$( "#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。如果您的图像文件夹有颜色名称，这应该可行。