JQuery найти конкретный IMG attr (SRC)

Question

Просто включите переключатель изображения и обнаружите небольшую проблему:

У меня есть три скрытых изображения, и при наведении курсора на соответствующую миниатюру я хочу добавить класс тока к основному изображению (чтобы оно не было скрыто).

$("#thumbs img").mouseenter(function(){

//this gets the url of the thumb
var imgSrc = $(this).attr("src");
//this removes the last 7 letters
imgSrc = imgSrc.slice(0,-7);
//this adds .jpg to the end
imgSrc = imgSrc + '.jpg';

//This removes all images class of current
$('#mainImg img').removeClass("current");

//I want this to find the image with the src of imgSrc and add the current class
$('#mainImg').find(img.attr("src",imgSrc)).addClass("current");

Последняя строка - проблема, она не работает - какой-нибудь совет?

Answer 1

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

$('#mainImg img').each(function(i,ele){
  if ($(this).attr("src") == imgSrc) { $(this).addClass("current"); }
}

Answer 2

Вы пытаетесь найти img, который не является переменной. Что вы должны сделать, это что-то вроде этого:

$("#mainImg img").each()

...
loop through the images and check which one has the correct source then add the class to it

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

Answer 3

$('#image'+$(this).attr('id')).addClass("current");

Попробуйте присвоить изображениям идентификаторы 'image1', 'image2' и т. Д., А свои миниатюры - '1', '2', '3'. Тогда это должно работать. Вам придется перебирать все изображения, чтобы выполнить то, что вы хотите, с помощью своего кода.