Доступ к изображению, на которое нажата ссылка с помощью jQuery

#jquery #hyperlink

#jquery #гиперссылка

Вопрос:

У меня есть ссылка, которой я хотел бы управлять с помощью jQuery:

 <a href="http://example.com/images/big_dog.jpg" >
    <img src= "http://example.com/images/small_dog.jpg" style="position:absolute; left:198; top:67; width:170">
</a>

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

href Атрибут, большая собака, прост. Я могу просто сделать .attr('href') . Но как мне получить доступ к <img> части ссылки, то есть к маленькой собачке, на которую нажимают?

find() Из <a> кажется неправильным, поскольку img фактически является частью <a> элемента.

Ответ №1:

img Тег в примере является дочерним по отношению к a тегу. Итак, чтобы получить значение атрибута src:

 $(this).children("img").attr("src");

Демонстрация jsFiddle

Ответ №2:

@imbondbaby прав в отношении дочерней части. Если вы хотите использовать find, но вам не удалось этого сделать, вот пример того, как это использовать:

 $('#test').click(function(){
    $(this).find('img').attr('src','http://portablegamingregion.com/wp-content/uploads/2013/03/Apple-and-Google-logo-Thumbnail1.png');
});

Пример: скрипка

1. Спасибо вам обоим. Я думал, что это еще не все, что <img> было каким-то атрибутом <a> , например, href .

2. @Steve вы можете сразу запустить событие click в теге img вместо того, чтобы оборачивать его в тег привязки, если хотите. В этом случае вы избежите метода поиска и дочерних элементов в обновленном fiddle: jsfiddle.net/C8LtP/1 (если тег привязки не требуется и не имеет нескольких дочерних элементов)

3. Спасибо. На самом деле я создаю ссылки для канала на Fancybox, и он ожидает <a> с <img> внутри.