Question

我在设置并在http://upsidecreative.com.au/index-new.html

工作的灯箱遇到问题

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

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

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

它的工作原理是它改变了灯箱完整图像的显示，从而没有＆＃39;无。到＆＃39;块＆＃39;但它会同时显示所有图像，因为它们都具有.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;
                }
            });      
        });

Jquery为灯箱设定了具有相同类别的单个元素

1 个答案: