Jquery - '如果灯箱 1 已打开，然后按右，更改为灯箱 2' - 2 IF 语句

Question

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

我正在尝试做的是设置 jQuery 以在用户按下左右键时在 4 个灯箱之间进行切换。

为此，我需要为每个操作创建 2 个 If 语句。

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

我需要“如果灯箱 2 已打开（显示：块）”并且用户按下右按钮，关闭灯箱 2，然后显示灯箱 3。

我需要“如果灯箱 2 已打开（显示：块）”并且用户按下左键，关闭灯箱 2，然后显示灯箱 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 将按钮绑定到它打开的灯箱，还保存一个变量，该变量是打开的任何内容的类名。

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
    });

});