JQUERY Нажмите события для нескольких изображений

Question

Я создаю галерею изображений просто для удовольствия, чтобы расширить свои начальные знания JQUERY.В галерее есть несколько миниатюр, которые при нажатии на них будут отображать большое изображение чуть ниже в окне просмотра изображений.Кроме того, когда миниатюра активна (изображение просматривается), миниатюра анимируется от 75 до 100 пикселей.

У меня это работает вручную, подключая идентификаторы ко всем изображениям, а затем пропуская их через каждыйякорь изображений.Структура ниже:

<div class="thumbnails" id="thumbnail_1">
    <a href="#" class="thumb_link" onclick='loadImage("#thumbnail_1","#image_1", "1");'>
    <img src="image-url-#.png" alt="Image 1"  border="0"  id="image_1" class="thumb_img"  /></a> 
  </div>

Это повторяется для всех миниатюр.Когда пользователь нажимает, изображение загружается в <div id="image_viewer"></div>

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

Я могу получить количество ссылок, используя $(".thumb_link").length;, что даст мне номер эскиза.ссылки есть.Но как я могу определить, на каком из них нажимают, чтобы показать изображение, относящееся к этой миниатюре?

Пример: пользователь нажимает на 3-й миниатюре, показывает большое изображение для большого пальца 3.

loadImageфункция:

function loadImage(thumb, id, imgNum){  
    $(thumb).animate({width:100, height:100},500); 
            $(id).animate({width:100, height:100},500); 
            $(thumb + " a").animate({width:100, height:100},500);


            $("#image_viewer").html('<img src="imagesurl-'+ imgNum + '.jpg" border="0" alt="image: '+ imgNum+'" />');



    }

Я хочу иметь возможность загружать изображение по классу, назначенному ему каждым тегом, следующим образом:

$(".thumbnails").eq(whatever_the_index_value_is).animate({width:100, height:100},500);

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

-

Одна из причин, по которой я хочу это сделать, заключается в том, чтобы я мог найти определенные атрибуты миниатюр (образ alt title src и т. д.) и подключитьих в другом месте.

Любая помощь будет приветствоваться!

Answer 1

 $(document).ready(function(){
   $(".thumb_link").click(function(event){
     event.preventDefault();
     check_image($(this));
   });
 });

$(this) в приведенном выше коде - это объект JavaScript, который содержит любое изображение, по которому щелкнули. Затем вы можете запросить информацию, которая вам нужна.