0

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

我想要做的是设置 jQuery 以在用户按下左右键时在 4 个灯箱之间进行更改。

为此，我需要为每个操作提供 2 个 If 语句。

我需要“如果灯箱一打开（显示：块）”并且用户按下右按钮，关闭灯箱一，然后显示灯箱 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');
            });
}
});
4

1 回答 1

0

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

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

});
于 2013-12-23T16:04:40.610 回答