Question

Conditional statements dont appear to be working for me. Im trying to a set of stacked images to change their zIndex based on the zIndex of the one being selected. So if i have a few buttons to call up a few images to the front:

(assume we started out on the first image by default and are selecting the 2nd image)

<script>
$(function() {
    var z = $("#image2").zIndex;  //also tried .css.zIndex;
    $("#button2").click(function() {
        if (z != 999 ) {
            $("#image1").animate({zIndex: 0}, 1, 'linear');
            $("#image2").animate({zIndex: 999}, 1, 'linear'); 
        } else {
        return false;
        };  
    });
});
</script>

The problem is that while it does work, it works regardless of whether the condition is true or not, so if i select the 2nd image then select it again it will run the script. Now before you start wondering why that matters, there’s more going on than just that, which is causing visual errors to occur otherwise id just leave it at that, but this is the gist of it.

Answer 1

You can do either:

$("#image2")[0].style.zIndex // document.getElementById(image2).style.zIndex

or

$("#image2").css('zIndex');

What you have here is a native JavaScript property getter/setter hanging off a jQuery collection, and that’s simply not how that works.