jquery - Jquery - 「ライトボックス 1 が開いている場合は、右を押してライトボックス 2 に変更してください」 - 2 つの IF ステートメント

Question

私のウェブページには 4 つのメイン アイコンがあり、そのうちの 1 つをクリックするとライトボックスが表示されます。クリックすると、ライトボックスが後退します。2 番目のアイコンをクリックすると、ライトボックス 2 が表示されます。

私がやろうとしているのは、ユーザーが左右に押したときに 4 つのライトボックスも変更するように jQuery を設定することです。

これを行うには、アクションごとに 2 つの If ステートメントが必要です。

「IF LIGHTBOX ONE IS OPEN (DISPLAY: BLOCK)」が必要で、ユーザーが右ボタンを押してライトボックス 1 を閉じ、ライトボックス 2 を表示します。

「IF LIGHTBOX 2 IS OPEN (DISPLAY: BLOCK)」が必要で、ユーザーが右ボタンを押してライトボックス 2 を閉じ、ライトボックス 3 を表示します。

「IF LIGHTBOX 2 IS OPEN (DISPLAY: BLOCK)」が必要で、ユーザーが左ボタンを押してライトボックス 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');
            });
}
});