Question

Trying to get a overlay to pop up when I select certain icons.

Problems:
1.) This works great in FF but not anywhere else. It works in chrome sometimes when I am inspecting the element.
2.) There has to be a shorter way to write this code…?

$(window).load(function(){
    var $quickview = $(".quickview");


$('.quickview').click(function() {
    var $t = $(this).parents("a");

    if($t.is(":nth-child(1)")){
        var css={}
        $("#overlay1").css("display","block");
        console.log("1")
        }
    else if($t.is(":nth-child(2)")){
        var css={}
        $("#overlay2").css("display","block");
        console.log("2")
        }
    else if($t.is(":nth-child(3)")){
        var css={}
        $("#overlay3").css("display","block");

        }
    else if($t.is(":nth-child(4)")){
        var css={}
        $("#overlay4").css("display","block");
        }
    else if($t.is(":nth-child(5)")){
        var css={}
        $("#overlay5").css("display","block");
        }
    else if($t.is(":nth-child(6)")){
        var css={}
        $("#overlay6").css("display","block");
        }
    else if($t.is(":nth-child(7)")){
        var css={}
        $("#overlay7").css("display","block");
        }
    else if($t.is(":nth-child(8)")){
        var css={}
        $("#overlay8").css("display","block");
        }
    else if($t.is(":nth-child(9)")){
        var css={}
        $("#overlay9").css("display","block");
        }
    else if($t.is(":nth-child(10)")){
        var css={}
        $("#overlay10").css("display","block");
        }

$('.exit, .overlay').click(function() {


    if($t.is(":nth-child(1)")){
        var css={}
        $("#overlay1").css("display","none");
        }
    else if($t.is(":nth-child(2)")){
        var css={}
        $("#overlay2").css("display","none");
        }
    else if($t.is(":nth-child(3)")){
        var css={}
        $("#overlay3").css("display","none");
        }
    else if($t.is(":nth-child(4)")){
        var css={}
        $("#overlay4").css("display","none");
        }
    else if($t.is(":nth-child(5)")){
        var css={}
        $("#overlay5").css("display","none");
        }
    else if($t.is(":nth-child(6)")){
        var css={}
        $("#overlay6").css("display","none");
        }
    else if($t.is(":nth-child(7)")){
        var css={}
        $("#overlay7").css("display","none");
        }
    else if($t.is(":nth-child(8)")){
        var css={}
        $("#overlay8").css("display","none");
        }
    else if($t.is(":nth-child(9)")){
        var css={}
        $("#overlay9").css("display","none");
        }
    else if($t.is(":nth-child(10)")){
        var css={}
        $("#overlay10").css("display","none");
        }
    });
});

});

Please Help!
Thanks!

Answer 1

have you tried something like this

$('.quickview').click(function() {
    var i = ( $(this).parents("a").index() + 1 );
     $("#overlay"+ i).css("display","block");
     console.log(i);

});