简单的jQuery条件语句

Question

I have a very simple script on my site.

If header is visible it'll remove the class fixed , if not, it'll add it.

$(function() {
        $(window).scroll(function() {
            $(".wrapper > header").visible(true) ?
                $(".wrapper > main > nav").removeClass("fixed") :
                $(".wrapper > main > nav").addClass("fixed");
        });
    });

As well as toggling between the fixed class, I'd also like to toggle between a fixed2 class.

So add:

$(".scrollWrapper").removeClass("fixed2") :
$(".scrollWrapper").addClass("fixed2");

But I'm unsure how to add this.

Answer 1

Since you would have two statements, you need to revert to a normal if/else:

if($(".wrapper > header").visible(true)){
     $(".wrapper > main > nav").removeClass("fixed");
     $(".scrollWrapper").removeClass("fixed2");
}else{
     $(".wrapper > main > nav").addClass("fixed");
     $(".scrollWrapper").addClass("fixed2");
}

Alternatively, don't use any conditionals and use the toggleClass method for this:

var toggle = $(".wrapper > header").visible(true);
$(".wrapper > main > nav").toggleClass("fixed", toggle);
$(".scrollWrapper").toggleClass("fixed2", toggle);

NOTE: the above supposes you have a visible -plugin, as otherwise that method won't work. To test for visibility you should use is .is(':visible')

Answer 2

There is no property called visible in jquery object. So you need to use

$(".wrapper > header").is(":visible)

so the expression becomes :

 $(".wrapper > header").is(":visible") ?
            $(".wrapper > main > nav").addClass("fixed") :  $(".wrapper > main > nav").removeClass("fixed") ;

For Toggling :

$(".scrollWrapper").toggleClass('fixed fixed2');

Answer 3

if your doing a few things based on a condition its probably better to use an if statement as opposed to ternary.

$(function() {
    $(window).scroll(function() {
        if($(".wrapper > header").visible(true)){
            $(".wrapper > main > nav").removeClass("fixed");
            $(".scrollWrapper").removeClass("fixed2");
        }else{
            $(".wrapper > main > nav").addClass("fixed");
            $(".scrollWrapper").addClass("fixed2");
        }
    });
});

Ternarys are great but as everything they have their use-cases. This may not be one of them.

Answer 4

You can use an if-else statement instead of a ternary one. After all, jQuery is a JavaScript library.

$(function() {
    $(window).scroll(function() {
        if ($(".wrapper > header").visible(true)) {
            $(".wrapper > main > nav").removeClass("fixed");
            $(".scrollWrapper").removeClass("fixed2");
        } else {
            $(".wrapper > main > nav").addClass("fixed");
            $(".scrollWrapper").addClass("fixed2");
        }
    });
});

If you're really set on using only ternary statements, you just have to add another one:

$(function() {
    $(window).scroll(function() {
        $(".wrapper > header").visible(true) ?
            $(".wrapper > main > nav").removeClass("fixed") :
            $(".wrapper > main > nav").addClass("fixed");
        $(".wrapper > header").visible(true) ?
            $(".scrollWrapper").removeClass("fixed2") :
            $(".scrollWrapper").addClass("fixed2");
    });
});