Jquery - 'If Lightbox 1 is open, and press Right, change to lightbox 2' - 2 IF 语句

Question

所以我的网页上有 4 个主要图标，当您单击其中一个时，会弹出一个灯箱。当您单击关闭时，灯箱会后退。当您单击第二个图标时，会出现灯箱 2 等。

我想做的是将 jQuery 设置为在用户按左右键时也在 4 个灯箱之间切换。

为此，我需要为每个操作使用 2 个 If 语句。

我需要'IF LIGHTBOX ONE IS OPEN (DISPLAY: BLOCK)'并且用户按下 RIGHT 按钮，关闭 lightbox 1，并显示 lightbox 2。

我需要'IF LIGHTBOX TWO IS OPEN (DISPLAY: BLOCK)'并且用户按下 RIGHT 按钮，关闭灯箱 2，然后显示灯箱 3。

我需要“IF LIGHTBOX TWO IS OPEN (DISPLAY: BLOCK)”并且用户按下 LEFT 按钮，关闭灯箱二，并显示灯箱 1。

等。

到目前为止，这是我的 Jquery，我还没有包括我对如何做到这一点的尝试，因为我不认为我已经接近了。谢谢

//主屏灯箱功能--

$(document).ready(function() {  

            $('.lightboxgo').click(function(){
            $('.backdrop').animate({'opacity':'.50'}, 600, 'linear');
            $('.lightbox').animate({'opacity':'1.00'}, 300, 'linear');
            $('.backdrop, .lightbox').css('display', 'block');
            })

        $('.lightboxgo2').click(function(){
            $('.backdrop').animate({'opacity':'.50'}, 600, 'linear');
            $('.lightbox2').animate({'opacity':'1.00'}, 300, 'linear');
            $('.backdrop, .lightbox2').css('display', 'block');
            })

        $('.lightboxgo3').click(function(){
            $('.backdrop').animate({'opacity':'.50'}, 600, 'linear');
            $('.lightbox3').animate({'opacity':'1.00'}, 300, 'linear');
            $('.backdrop, .lightbox3').css('display', 'block');
            })

        $('.lightboxgo4').click(function(){
            $('.backdrop').animate({'opacity':'.50'}, 600, 'linear');
            $('.lightbox4').animate({'opacity':'1.00'}, 300, 'linear');
            $('.backdrop, .lightbox4').css('display', 'block');
            })

        $('.close').click(function(){
            close_box();
        });

        $('.backdrop').click(function(){
            close_box();
        });


$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        close_box();
    }
});

//Function created to hide lightbox and backdrop --

function close_box()
{

        $('.backdrop, .lightbox, .lightbox2, .lightbox3, .lightbox4, .portfolioimage1').animate({'opacity':'.0'}, 300, 'linear', function(){
            $('.backdrop, .lightbox, .lightbox2, .lightbox3, .lightbox4, .portfolioimage1').css('display', 'none');
            });
}
}); 

Answer 1

你可以通过抽象一点来简化这个逻辑。

1. 有一个打开灯箱的函数，该函数接受一个参数，即要打开的灯箱的 jquery 元素，还有一个关闭灯箱的函数。

2. 保存一个包含所有灯箱可点击元素的变量，并使用 jquery data-api 将按钮绑定(bind)到它打开的灯箱，同时保存一个变量，该变量是打开的任何内容的类名。

3. 向灯箱按钮添加一个点击监听器，该监听器查看点击的内容并通过调用该打开函数基于此(使用数据 API)打开一个灯箱。还为关闭灯箱的关闭和背景元素设置点击监听器，并让它们通过使用该类名称关闭打开的灯箱

4. 每当您打开灯箱、添加关键监听器并使用 jquery prev() 和 next() 函数切换灯箱以在灯箱元素之间切换时，您关闭所有打开的并打开 next() 或 prev( ) 那些，每当你关闭时，删除那个关键的监听器

有道理吗？

这可能并不完美，但它说明了我在代码中所说的:

$(function(){
    var lightBoxes = $(".lightbox");// 1 class that every lightbox has
    var openClass = "lightboxOpen";// class for when you have an open lightbox only 1 at a time will have this
    function close_box($el){

        $el.removeClass(openClass);//remove the class when closing it
        //code to close specific light box using $el to refer to the lightbox
        removeKeyDownListener();//define a function to remove the listeners when you close
    }

    function openLightbox($el){
       $el.addClass(openClass);//add the open class when opening
       //code to open lightbox using $el to refer to the specific one to be opened
       addKeyDownListeners()//define a function to listen to key listeners
    }

    function addKeyDownListener(){
       $(document).bind('keydown', function(e){
           var openBox = $('.'+ openClass);
           close_box($(openBox);//close the open box first
           if(e.keyCode == [key for right arrow]){
               var nextItem = openBox.next();//this will work if your lightbox elements are setup as siblings(under the same parent at the same level of nesting)
               openLightBox(nextItem);
           }

           if(e.keyCode == [key for left arrow]){
               var prevItem = openBox.prev();//this will work if your lightbox elements are setup as siblings(under the same parent at the same level of nesting)
               openLightBox(prevItem);
           }
       });
    }

    function removeKeyDownListeners(){
        $(document).unbind('keydown');//remove all key down listeners
    }

    lightBoxes.click(function(){
        var item = $(this);// capture the specific one clicked on
        var lightboxItem = item.data('lightboxel');//use the data attribute to bind the button to its lightbox ex <div class="lightboxgo4 lightbox" data-lightboxel=".lightbox4"></div>
        openLightbox($(lightboxItem));//define a function that opens the lightbox
    }); 

    $('.close, .backdrop').click(function(){
       close_box($('.' + openClass));//close the lightbox with the open class
    });

});