Jquery -‘如果Lightbox 1已打开，并按右键，则更改为lightbox 2’-2 IF语句

Question

我的网页上有4个主要图标，当你点击其中一个时，会弹出一个灯箱。当您单击关闭时，灯箱将后退。单击第二个图标时，会出现lightbox 2，依此类推。

我正在尝试做的是，当用户按下左和右按钮时，设置jQuery在4个灯箱之间切换。

要做到这一点，我需要为每个操作使用2个If语句。

我需要'IF LIGHTBOX ONE IS OPEN ( display : BLOCK)‘，用户按下右键，关闭lightbox one，然后显示lightbox 2。

我需要'IF LIGHTBOX two IS OPEN ( display : BLOCK)‘，用户按下右键，关闭lightbox 2，并显示lightbox 3。

我需要'IF LIGHTBOX two IS OPEN ( display : BLOCK)‘，然后用户按下左按钮，关闭lightbox 2，并显示lightbox 1。

等。

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

//主屏幕lightbox函数--

$(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)的灯箱。还要为关闭和背景元素设置单击侦听器，这些元素关闭一个灯箱并让它们通过使用打开的任何东西的类名来关闭打开的灯箱。每次打开灯箱时，使用jquery
4. ()和
5. ()函数添加键侦听器和切换灯箱，以便在灯箱元素之间切换，然后关闭任何打开的元素，然后打开

()或()，并在关闭时删除该键侦听器。

讲得通?

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

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

});