Почему один обмен изображениями влияет на другое изображение?

Question

В настоящее время я пытаюсь заставить это работать с 2 основными изображениями и сопровождающими их селекторами, но в конечном итоге будет несколько вариантов.

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

Скрипт, в настоящее время изменяющий оба:

$(document).ready(function() {
  // Image swap on hover
  $("div.product li img").hover(function() {
    $('img.productimg').attr('src', $(this).attr('src').replace('thumb/', ''));
  });
  var imgSwap = [];
  $("div.product li img").each(function() {
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
  });
  $(imgSwap).preload();
});
$.fn.preload = function() {
  this.each(function() {
    $('<img/>')[0].src = this;
  });
}

Текущий формат HTMLв разбивке:

<div class="product" class="gallery">
   <div class="mainimage">
      <img class="productimg" src="images/1.jpg" class="main-img">
   </div>
   <div class="imageselector">
      <ul>
         <li><img class="prod-thumbs" src="images/1.jpg"></li>
         <li><img class="prod-thumbs" src="images/2.jpg"></li>
         <li><img class="prod-thumbs" src="images/3.jpg"></li>
      </ul>
   </div>
</div>
<div class="product" class="gallery">
   <div class="mainimage">
      <img class="productimg" src="images/4.jpg" class="main-img">
   </div>
   <div class="imageselector">
      <ul>
         <li><img class="prod-thumbs" src="images/artwork/artist1/modal/4.jpg"></li>
         <li><img class="prod-thumbs" src="images/artwork/artist1/modal/5.jpg"></li>
         <li><img class="prod-thumbs" src="images/artwork/artist1/modal/6.jpg"></li>
      </ul>
   </div>
</div>

Из @Terry Я включил этот скрипт с намерением, чтобы селектор изображений воздействовал только на основное изображение, которое также сгруппировано / расположено ближе всего.Однако это, кажется, остановило работу функции hover в любом качестве, и я нашел единственный способ заставить ее работать - вернуть ее обратно к предыдущему сценарию.

$(document).ready(function() {
  // Image swap on hover
  $("div.product li img").hover(function() {
    $(this).closest('.imageselector').prev('.productimg').find('img').attr('src', $(this).attr('src').replace('thumb/', ''));
  });
  var imgSwap = [];
  $("div.product li img").each(function() {
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
  });
  $(imgSwap).preload();
});
$.fn.preload = function() {
  this.each(function() {
    $('<img/>')[0].src = this;
  });
}

Answer 1

Ваша основная проблема связана с логикой в ​​этом блоке:

$("div#gallery li img").hover(function () {
    $('img#main-img').attr('src', $(this).attr('src').replace('thumb/', ''));
});

За исключением проблемы дублирующих идентификаторов (вы никогда не должны повторно использовать идентификаторы в документе, поскольку они должны быть уникальными), проблема, которую вы решаетеесть то, что для каждого изображения галереи, которое вы наводите, оно просто выберет основное изображение, которое jQuery найдет в DOM.Вам нужно выбрать основное изображение, которое контекстуально связано с изображениями галереи: в этом случае основное изображение вложено в div.mainimage, то есть в сестру div.imageselector, которая, в свою очередь, содержит изображение галереи.Итак, что вы действительно хотите, это , чтобы выбрать элемент изображения, который вложен в элемент родственного элемента родительского изображения галереи .

Чтобы исправить вашу проблему, вам необходимо:

1. Измените gallery и main-image с идентификатора на классы

2. Реализуйте следующий код в своей функции наведения:

   $("div.gallery li img").hover(function () {
       $(this).closest('.imageselector').prev('.mainimage').find('img').attr('src', $(this).attr('src').replace('thumb/', ''));
   });
   

Приведенная выше логика может быть разбита следующим образом:

1. Всякий раз, когда на изображение галереи наведено, выберите его ближайшего родителя, который имеет класс .imageselector
2. Получить предыдущего братаближайшего родителя с классом .mainimage
3. Найдите элемент изображения внутри .mainimage
4. Установите атрибут, как вы делали до