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

Question

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

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

$('.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', который вызывается функция.

EDIT:

Основываясь на структуре вашего 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; 
       } 
      }); 
     }); 

Чтобы скрыть элементы с «поле» и «» 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; 
       } 
      });  
     });