Как передать объект изображения в назначенную ему функцию onclick?

Question

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

var imageTag = "<img onclick=\"enlargeImage()\" class=\"thumb\" src=\"" + photoURL + "\" />"; 
document.getElementById("image-thumbnail").innerHTML = imageTag;

С этим кодом выше отображается мое миниатюра, и когда пользователь нажимает на нее, вызывается функция enlargeImage(). У меня вопрос, как я могу получить доступ к объекту изображения, который был нажат внутри функции enlargeImage()? Я попытался получить доступ к объекту this внутри функции, надеясь, что он указывает на изображение, которое щелкнуло, но this ссылается на всю страницу, а не на изображение, на которое щелкнули Я хотел бы получить доступ к атрибуту src, а также изменить атрибуты стиля миниатюры изображения. Я также должен отметить, что в конечном итоге будет несколько изображений, поэтому мне нужно такое динамическое поведение.

Большое спасибо заранее за вашу помощь!

Answer 1

Есть несколько способов сделать это. Самый простой - просто добавить параметр в функцию enlargeImage() и передать ему ссылку this при вызове.

var imageTag = "<img onclick=\"enlargeImage(this)\" class=\"thumb\" src=\"" + photoURL + "\" />";

Тогда в функции ...

function enlargeImage(img) {
  alert(img.src);
}

Answer 2

Я предлагаю проверить jQuery, так как он имеет много обёрток и обработчиков для работы с этим материалом и имеет большой импульс в последнее время.

Чтобы быть более конкретным в вашем вопросе, вы можете просто передать «this» своей функции:

var imageTag = "<img onclick=\"enlargeImage(this)\" class=\"thumb\" src=\"" + photoURL + "\" />";

и тогда в вашей функции у вас будет доступ к тегу src:

function enlargeImage(img){
  alert(img.src);
}

Answer 3

function enlargeImage(img) { var src = img.src; }