Question

我的网站上有一个非常简单的脚本。

如果标题可见，它会删除课程fixed，否则，它会添加它。

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

除了在fixed课程之间切换外，我还想在fixed2课程之间切换。

添加：

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

但我不确定如何添加它。

Answer 1

由于你有两个语句，你需要恢复正常的if / else：

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

或者，不要使用任何条件并使用toggleClass方法：

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

注意：上面假设您有一个visible - 插件，否则该方法将无效。要测试您应该使用的可见性是.is(':visible')

Answer 2

jquery对象中没有可见的属性。所以你需要使用

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

所以表达式变为：

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

For Toggling：

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

Answer 3

如果你根据一个条件做了一些事情，那么最好使用 if 语句而不是三元语句。

$(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很棒，但是他们有自己的用例。这可能不是其中之一。

Answer 4

您可以使用if-else语句而不是三元语句。毕竟，jQuery是一个JavaScript库。

$(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");
        }
    });
});

如果你真的开始只使用三元语句，你只需要添加另一个：

$(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");
    });
});

简单的jQuery条件语句

4 个答案: