Изменение каждого изображения при нажатии JQuery

У меня есть небольшая проблема, пытаясь получить рабочий список каталогов в сценарии на основе Magento, у которого есть связанные изображения в списке продуктов, и при щелчке по нему изменяется основное изображение.Изменение каждого изображения при нажатии JQuery

Проблема в том, что при щелчке Все изображения изменены.

Как я могу изменить только одно нажатие? И переместите основное изображение в файл-main-image-src.

Ниже код им используется.

HTML:

<li class="item first"> 
    <a href="http://localhost/product.html" title="Product" class="product-image"><img class="MainImage" src="//lorempixel.com/60/60/food/1/" width="155" height="145" alt="Product"></a> 
    <div class="moreviewslist"> 
     <img data-main-image-src="//lorempixel.com/60/60/food/2/" src="//lorempixel.com/60/60/food/2/"> 
     <img data-main-image-src="//lorempixel.com/60/60/food/3/" src="//lorempixel.com/60/60/food/3/"> 
    </div> 
    <h2 class="product-name"><a href="http://localhost/product.html" title="Product">Product</a></h2> 
</li>

Jquery:

jQuery(document).ready(function() 
      { 
       jQuery(".moreviewslist img").click(function() 
       { 
        jQuery(".MainImage").attr("src", jQuery(this).attr("data-main-image-src")); 
       }); 
      });

JSFiddle пример: http://jsfiddle.net/neocastelli/8YxnR/2/

Любая помощь очень ценится.

источник

2014-01-29 Dario

Попробуйте этот код ниже:

jQuery(".moreviewslist img").click(function() { 
    jQuery(this).parent().prev().find('img').attr("src", jQuery(this).attr("data-main-image-src")); 
});

источник

2014-01-29 14:42:02 Felix

Спасибо Феликс, еще один быстрый вопрос, если я хочу поставить основное изображение в moreviewlist?, Я имею в виду сделать переключатель betwen изображения на мыши. – Dario

Я не понимаю, что вы имеете в виду. Вы хотите переместить основное изображение внутри moreviewlist? Можете ли вы подробнее рассказать о своем вопросе. – Felix

Итак, когда вы нажимаете уменьшенное изображение снизу, оно меняет основное изображение, но основное изображение исчезает, и я не могу переключиться обратно на основное изображение, только если обновить страницу, поэтому думаю, что если щелкнуть миниатюру, поставьте миниатюру data-main-image-src к основному изображению и главному изображению в файл-main-image-src. – Dario

У вас нет HTTP для источника вы replacing.you нужно использовать:

jQuery(".MainImage").attr("src","http:"+ jQuery(this).attr("data-main-image-src"));

Demo

источник

2014-01-29 14:44:26

Hi Milind, спасибо за ответ, да, изображения - всего лишь пример. благодаря – Dario

Использование closest для обхода до li, затем используйте find, чтобы найти img.MainImage

jQuery(".moreviewslist img").click(function() { 
    jQuery(this).closest('li').find('.MainImage').attr("src", jQuery(this).attr("data-main-image-src")); 
});

FIDDLE

источник

2014-01-29 14:50:57

Изменение каждого изображения при нажатии JQuery

ответ

Смежные вопросы