Anchored Images and preventDefault()

Я написал небольшой скрипт, который позволяет пользователям искать изображения. Существует большое основное изображение и несколько миниатюр, которые создаются и добавляются в HTML при отправке поиска. Файлы изображений удаленно размещаются и отформатируются с помощью CSS. Основное изображение должно быть заменено на любое нажатие на миниатюру, но я не могу заставить его работать, и не работает event.preventDefault(). У меня такое чувство, что это проблема с селекторами jQuery, но я пробовал несколько разных конфигураций и ничего. Любая помощь приветствуется.Anchored Images and preventDefault()

<div id="photos"> 
    <div id="mainImage"> 
     <a href="http://drive.google.com/pic1.jpg" target="_blank" class="main"> 
      <img src="http://drive.google.com/pic1.jpg" alt="Pic 1" /> 
     </a> 
    </div> 
    <div id="thumbs"> 
     <a href="http://drive.google.com/pic1.jpg" class="thumb"> 
      <img src="http://drive.google.com/pic1.jpg" alt="Pic 1" class="thumbnail"/> 
     </a> 
     <a href="http://drive.google.com/pic2.jpg" class="thumb"> 
      <img src="http://drive.google.com/pic2.jpg" alt="Pic 2" class="thumbnail"/> 
     </a> 
     <a href="http://drive.google.com/pic3.jpg" class="thumb"> 
      <img src="http://drive.google.com/pic3.jpg" alt="Pic 3" class="thumbnail"/> 
     </a> 
    </div> 
</div> 



$('a.thumb img.thumbnail').on('click', function(event) { 
    event.preventDefault(); 

    var src = $('img.thumbnail').attr('src'), alt = $('img.thumbnail').attr('alt'); 

    $('a.main').attr('href', src); 
    $('a.main img').attr({'src': src, 'alt': alt}); 
});

источник

2014-12-16 Cam

Вы предотвращаете событие click по умолчанию на img, а не на якоре. Вам также может понадобиться использовать 'event.stopPropagation()', чтобы избежать нажатия на якорь. Кроме того, ваши селекторы 'img.thumbnail' возвратят несколько результатов, вы должны ограничить область действия переключателя до $ (this). – nullability

Это то, что я изначально думал, но используя «event.stopPropagation()» и не имеет никакого значения. Я пробовал использовать «это» раньше, но, будучи Javascript, это явно не сработало. Не увидев мою ошибку, я подумал, что мне нужно указать с фактическим селектором, и то, что вы видите, является результатом. Итак, спасибо за очистку области выбора. Он по-прежнему не хочет работать по какой-то причине, но спасибо за вашу помощь. – Cam

Может быть, Вы должны попробовать это:

$('div#thumbs a.thumb').on('click', function(event) { 
    event.preventDefault(); 

    var image = $(this).find('img'); 
    var src = image.attr('src'); 
    var alt = image.attr('alt'); 

    $('div#mainImage a.main').attr('href', src); 
    $('div#mainImage a.main img').attr({'src': src, 'alt': alt}); 
});

Firsly, Вы предотвращают действие CLICK по умолчанию на изображение, а не якорь. Во-вторых, использование $('img.thumbnail') приведет к возврату нескольких объектов в код.

источник

2014-12-16 22:37:14

Благодарим вас за быстрый ответ и очистку, используя $ (this). «Это» - это то, что я пробовал раньше, но я забыл сделать его объектом jQuery, и поэтому, как и выше, это не сработало. Мне нравится внешний вид вашего решения лучше, чем у меня, но он все равно производит тот же эффект. При щелчке эскиз перенаправляет страницу на собственный адрес. Интересно, будет ли использование относительного href иметь значение? В очередной раз благодарим за помощь. – Cam

Не проблема :). Вы изменили селектор от '$ ('a.thumb img.thumbnail')' to '$ ('a.thumb')'? –

Проблема заключалась в значениях href в тегах привязки. Сценарий работал после их удаления.

источник

2016-09-18 19:22:54 Cam

Anchored Images and preventDefault()

ответ

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