JQuery целевые отдельные элементы с тем же классом для лайтбокса

Question

У меня проблемы с моим лайтбоксом, который настроен и работает на http://upsidecreative.com.au/index-new.html

Проблема в том, что каждое полное изображение лайтбокса имеет класс.boximage, и когда я нажимаю на миниатюру (класс.lightbox), запускается javascript...

    $('.lightbox').click(function(){
        $('.backdrop, .box, .boximage').css('display', 'block');
    });

(.backdrop - это размытие фона позади лайтбокса, а.box - это окно, в котором есть изображение и подпись внутри, а также кнопка закрытия)

Он работает в том смысле, что изменяет отображение полного изображения лайтбокса с "none" на "block", но отображает все изображения одновременно, поскольку все они имеют класс.boximage.

Есть ли способ нацелить каждое отдельное полное изображение лайтбокса здесь, чтобы отобразить правильное?

Большое спасибо, Грег

Answer 1

Попробуйте использовать:

$('.lightbox').click(function()
{
     $(this).find('.backdrop, .box, .boximage').css('display', 'block');
 });

Это нацелено на элемент.lightbox, который вызвал функцию.

РЕДАКТИРОВАТЬ:

Основываясь на структуре вашей DOM, это то, что вы можете сделать для всех событий щелчка.

    $('.lightbox').click(function () {
    /* Assigns the unique generated id of the element in the DOM to a variable called id. */
            var id = $(this)[0].uniqueNumber;
   // Iterate through each item and find the corresponding element in the DOM with the same unique id.
            $(this).parent().parent().find('.lightbox').each(function () {
                if ($(this)[0].uniqueNumber == id) {
   // If match is found, search for elements with the following css and show them.
                    $(this).find('.box, .boximage').css('display', 'block');
                    return false;
                }
            });
        });

Чтобы скрыть элементы с классами 'box' и 'boximage',

     $('.close').click(function () {

            var id = $(this).parent()[0].uniqueNumber; 

            $(this).parent().parent().find('.box').each(function () {
                if ($(this)[0].uniqueNumber == id) { 
                    $(this).find('.box, .boximage').css('display', 'none');   return false;
                }
            });      
        });