Question

我有一系列汽车的图像（和缩略图）作为我网站的一部分。有四种不同的颜色，以及一个选择颜色的选择列表。我希望能够在列表中选择不同的颜色，这样显示的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

如果您按原样保留URL结构，则可以执行以下操作：

＆＃13;

$( "#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);
}
});
});

＆＃13;

<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>

＆＃13;

请检查生成的HTML。如果您的images文件夹有颜色名称，这应该可以。

Answer 2

Download jQuery并在您的文件夹中添加jQuery并在您的html中添加代码：

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

您可以使用jQuery并使用一个函数.attr，但首先，为所有选项值提供唯一ID，您可以将所有图像放在一个类中：为所有人提供唯一的ID：

 <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>

并在一个类中添加所有图像（您可以使用本地图像）：

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

之后：

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

参考here。

Answer 3

正如您所说，您维护正确的颜色目录结构。这可能适合你。

function bus(value) {
var result=value;
}

$("#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);
  });
});

Answer 4

试试这个：

＆＃13;

$(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);
        })
    })
})

＆＃13;

<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>

＆＃13;

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

4 个答案: