jQuery изменить изображение элемента магазина

0

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

<div id='store_checkout_image_div'>
    <img default-image='Images/test-shirt.jpg' src='Images/test-shirt.jpg' alt='Shirt' class='store_checkout_image'/>
    <div id='small_images'>
        <img id='store_image_1' src='Images/placeholder1.jpg' alt='Front' class='fade_store'/>
        <img id='store_image_2' src='Images/test-shirt.jpg' alt='Back' class='fade_store'/>
    </div>
</div>

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

$('.fade_store').mouseover(function(){
    var currentPic = $(this).attr('src');
    $('.fade_store').fadeTo(0.15);
    $('.store_checkout_image').attr('src', currentPic);
});//end mouseover

Обратите внимание, что я хотел бы изменить только изображение выбранного набора html div. В настоящее время Если у меня есть более одного набора, источник всех div с классом store_checkout_image изменится.

  • 0
    Вы устали удалять атрибут src, прежде чем устанавливать его снова?
  • 0
    Выглядит хорошо для меня: jsfiddle.net/Hz7x2
Показать ещё 1 комментарий
Теги:

2 ответа

0

Если вы просто хотите обновить первый элемент store_checkout_image:

$('.fade_store').mouseover(function(){
    var currentPic = $(this).attr('src');
    $('.fade_store').fadeTo('slow', 0.15); 
    $('.store_checkout_image').eq(0).attr('src', currentPic);
});//end mouseover

В противном случае обновите eq(0) чтобы указать на индекс какого бы то ни было элемента (0 указывает на первый элемент, 1 на второй и т.д.).

Кроме того, вызов fadeTo работает некорректно, попробуйте добавить скорость перехода:

$('.fade_store').fadeTo('slow', 0.15);

http://jsfiddle.net/Hz7x2/4/

Поделиться
0

Попробуйте это, может быть?

$('.fade_store').mouseover(function(){
    var currentPic = $(this).attr('src');
    $(this).parent().find('.fade_store:first').fadeTo(0.15);    
    $(this).parent().find('.store_checkout_image:first').attr('src', currentPic);
});//end mouseover
Поделиться
  • 0
    это должно быть .parent (). parent () для фактического изменения изображения, но, к сожалению, это не решает проблему изменения каждого .store_checkout_image. Спасибо хоть!
  • 0
    да, действительно parent (). parent () ... я думал, что вы меняете все изображения одним и тем же классом вместо одного ..
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню