jQuery: Как записать атрибут «src» в аргумент функции Onclick дочернего элемента - PullRequest
Новая
       12

jQuery: Как записать атрибут «src» в аргумент функции Onclick дочернего элемента

0 голосов
/ 05 августа 2011

Я использую jQuery для перезаписи DOM, чтобы преобразовать HTML-страницу без JS в страницу JS-диска. Я столкнулся с проблемой при преобразовании ссылок на изображения. В исходном коде у меня есть: 

<div class="f">
   <a href="images/Fig-03-2.png" target="_blank">
      <img src="images/fig-03-2.png" alt="Fig 3.3" />
   </a>
</div>

... и я хочу преобразовать его в: 

<div class="f">
   <a>
      <img src="images/fig-03-2.png" alt="Fig 3.3" onclick="imagepop("fig-03-2.png")/>
   </a>
</div>

Я не могу понять, как написать атрибут onclick, чтобы он содержал значение img src в качестве аргумента imagepop. Я попробовал: 

$(".f a").attr('onclick', 'imagepop(' + $(this).attr('src') + ')' );

... но $(this).attr('src') вернул "undefined".

Как мне исправить строку кода или лучше прочитать атрибут img src из функции imagepop?

** Обратите внимание, я не разработал страницу, чтобы каждый div имел уникальный идентификатор, и не планирую это делать. Ни одному из элементов внутри тега <div> не назначены идентификаторы.

Ответы [ 2 ]

6 голосов
/ 05 августа 2011

... и я хочу превратить его в ...

За то, что это стоит, я бы не стал. Вместо я бы использовал такую ​​функцию: 

$("div.f a img").click(function() {
    imagepop(this.src);
    return false;
});

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

Это называется прогрессивное улучшение . Пользовательские агенты с поддержкой JavaScript будут использовать вышеизложенное, а те, у которых JavaScript не включен, все равно будут видеть и переходить по ссылке. Помните, что пользовательские агенты - это не просто браузеры, они включают сканеры, пауки и т. Д., И да, браузеры с отключенным JavaScript.

Обновление : Если вы действительно хотите обрабатывать его на уровне ссылок (что может быть более удобно для клавиатуры), а не на уровне изображений, то: 

$("div.f a").click(function() {
    var img = $(this).find("img");
    if (img[0]) {
        imagepop(img[0].src);
        return false;
    }
});

... поскольку элемент img, а не a имеет src. (И нет необходимости использовать attr здесь, отраженное свойство src поддерживается всеми основными - и, возможно, всеми второстепенными - браузерами.)

1 голос
/ 05 августа 2011

попробуйте это: 

$('.f a').onclick(function(e){
imagepop($(this).find('img').attr('src'));
e.preventDefault();
});

По сути, он выбирает все якоря класса .f и применяет onclick к каждому из них.внутри функции onclick мы ссылаемся на this, который является текущим тегом привязки, и помещаем его через объект jQuery.Это позволяет нам найти все img элементы под этим якорным тегом, извлечь его атрибут src и запустить его через imagepop().

...