У меня есть подборка изображений (и эскизов) автомобиля в рамках моего сайта. Есть четыре разных цвета и список выбора, чтобы выбрать цвет. Я хочу иметь возможность выбрать другой цвет в списке так, чтобы 4 из 6 изображений на дисплее менялись, поэтому они были другого цвета.

Я исследовал это и нашел методы, которые могут переключать изображения, но независимо от того, что я делаю, я могу только изменить их на одно и то же изображение, я не могу использовать несколько 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>
0
jcrossley 13 Янв 2017 в 16:07

4 ответа

Лучший ответ

Если вы сохраните структуру 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. Если ваша папка изображений будет иметь названия цветов, это должно работать.

1
sinisake 13 Янв 2017 в 13:28

Загрузите jQuery, добавьте jQuery в свою папку и добавьте код в html:

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

Вы можете использовать jQuery для него и использовать одну функцию .attr, но сначала дайте уникальный идентификатор для всех значений параметра, и вы можете поместить все изображения в один класс: Дайте уникальный идентификатор для всех:

 <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]);
});

Ссылка здесь.

0
Sayuri Mizuguchi 13 Янв 2017 в 13:25

Попробуй это:

$(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>
0
Landaida 13 Янв 2017 в 13:58

Как вы сказали, вы поддерживаете правильную структуру каталогов для цветов. Это может работать для вас.

$("#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>
0
Jyothi Babu Araja 13 Янв 2017 в 13:45