Jquery针对灯箱具有相同类的单个元素

Question

我在http://upsidecreative.com.au/index-new.html 设置和工作的灯箱有问题

问题是，每个灯箱完整图像都有一个 .boximage 类，当我点击缩略图（.lightbox 类）时，javascript 运行...

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

（.backdrop 是灯箱后面的背景变灰，.box 是里面有图像和标题以及关闭按钮的框）

它的工作原理是将灯箱完整图像的显示从“无”更改为“块”，但它会同时显示所有图像，因为它们都具有 .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;
                }
            });      
        });