Question

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

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

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

我需要'如果LIGHTBOX ONE打开（显示：BLOCK）'并且用户按下RIGHT按钮，关闭灯箱1，并显示灯箱2.

我需要'如果LIGHTBOX TWO（打开：BLOCK）'，用户按下RIGHT按钮，关闭灯箱2，并显示灯箱3.

我需要'如果LIGHTBOX TWO（打开：BLOCK）'，用户按下LEFT按钮，关闭灯箱2，并显示灯箱1.

ETC。

到目前为止，这是我的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

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

有一个功能可以打开一个灯箱，该灯箱带有一个参数，该参数可以打开灯箱的jquery元素，还有一个可以关闭它的灯箱。
保存一个包含所有灯箱可点击元素的变量，并使用jquery data-api将按钮绑定到它打开的灯箱，同时保存一个变量，该变量是打开的任何类的名称。
在灯箱按钮上添加一个点击监听器，查看点击的内容，并通过调用该打开功能打开一个灯箱（使用数据api）。同时为关闭灯箱的关闭和背景元素设置点击列表，并让它们通过使用该类名来关闭打开的灯箱
无论何时打开灯箱，使用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
    });

});

Jquery - '如果灯箱1打开，按右键，改为灯箱2' - 2 IF语句

1 个答案: