Как вы можете заменить эти атрибуты onclick = "..." более чистым кодом стиля jQuery?

Question

У меня есть какой-то код, похожий на этот ...

<img src="..." width="100" height="100" alt="" onclick="FlipImg(1234)" />

На странице много таких изображений, каждое из которых имеет свой идентификатор в вызове FlipImg().

Я обычно предпочитаю помещать этот тип кода в немного jQuery, может быть, немного так ...

$("img").click(FlipImg(<id from somewhere?>));

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

Может кто-нибудь предложить способполучить мой код onclick из html и в мой файл javascript, где он находится?

Answer 1

$("img").click(function() {
    FlipImg($(this).attr('class'));
});

Вы можете сделать это таким образом и сохранить идентификатор в теге id изображения. Чтобы быть действительным HTML, идентификаторы не могут начинаться с цифры, поэтому добавьте к ней что-нибудь.

РЕДАКТИРОВАТЬ: я пропустил часть вопроса

<img src="..." width="100" height="100" alt="" class="img1234" />

Затем выполните:

$("img").click(function() {
    FlipImg($(this).attr('class').substring(3));
});

Answer 2

Как и в случае с другими ответами здесь, я бы рекомендовал повторно использовать другой атрибут в вашем документе и использовать jQuery для извлечения значения.Какой из них вы можете использовать, зависит от страницы doctype и от того, насколько точно вы хотите следовать спецификациям этого типа документов.Если вас не интересует тип документа, то любой из ответов, которые я видел на этот вопрос, сработает.Если вам все равно, ваш выбор довольно мал:

1. Вы можете добавить класс к изображению: <img src="..." class="flip1234" />
2. Вы можете добавить заголовок к этому изображению: <img src="..." title="Image 1234" alt="Alt text" />
3. Вы можете добавить хеш к URL-адресу изображения: <img src="myimage.png#1234 />
4. Вы можете обернуть изображение в привязку, но позже убить клик: <a href="myimagescript.php?id=1234"><img .../></a>

Опция 4 - это опция, только если у вас есть действующая страница для обработки запросов такого рода.Это предпочтительнее для всех этих решений, потому что оно по-прежнему позволяет пользователям без JS видеть ваш контент.И некоторые люди действительно раздражаются при выборе 1, потому что они думают, что это загрязняет представление поведением.Я полностью понимаю их точку зрения, но это мой личный выбор.

Добавление пользовательского тега - это определенно вариант, но вы обязаны создать свой собственный DTD, если вы действительно действительно заботитесь о проверке.

Answer 3

что бы я не понял, твой вопрос, мое решение

HTML

   <img src="..." width="100" height="100" id="1234" />

Javascript

jQuery('img').bind('click',function(e){
        FlipImg(jQuery(e.target).attr('id'));
      });

Answer 4

Полагаю, ваш запрос касается перемещения кода из HTML. Вы можете добавить дополнительный атрибут, как предложил Алин. А затем в js переберите все теги img, чтобы выяснить, существует ли этот атрибут в теге, и только затем привязайте к нему клик. Сейчас я изучаю jquery, поэтому не буду писать код. Если кто-то может поставить это здесь, пожалуйста, сделайте.

Answer 5

попробуй:

и в jQuery:

$ ("img"). Click (function () {FlipImg ($ (this) .attr ("rel"));});

должно работать