javascript - ".hasClass"if 语句不起作用

Question

<nav id="navbar-main" class="navbar navbar-default navbar-static-top main-nav" data-spy="affix" data-offset-top="100">
    <div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand" href="#"><img id="#head-logo" src="images/logo.png"></a>
</div>

当从顶部滚动并添加一个类时，上面的导航栏会发生变化 - “affix”，当导航栏具有类“affix”时，我想更改 navbar-brand 内图像的来源。 但以下不起作用 -

$(document).ready(function() {
       if ($("#navbar-main").hasClass('affix')) {
          $(".navbar-brand img").attr('src','second.jpg');
    }
    else {
       $(".navbar-brand img").attr('src','images/logo.png');
    }
});

以下作品 -

   $(window).scroll(function (){
       var navscroll = $(window).scrollTop();
       if(navscroll >= 50) {
          $(".navbar-brand img").attr('src','second.jpg');
    }
    else {
       $(".navbar-brand img").attr('src','images/logo.png');
    }
});

Answer 1

如果在滚动时添加/删除类，您需要将代码放入 scroll 回调中，并在添加类后 运行它/删除(如果您将更改基于类)。 ready 仅在页面加载和解析时运行一次。

例如，您可以这样做:

function updateLogo() {
    if ($("#navbar-main").hasClass('affix')) {
          $(".navbar-brand img").attr('src','second.jpg');
    }
    else {
       $(".navbar-brand img").attr('src','images/logo.png');
    }
}
$(updateLogo);
$(window).on("scroll", updateLogo);

...但前提是您知道执行类更新的代码已经注册了它的 scroll 处理程序(因为处理程序是按顺序执行的，所以如果它已经在上面的代码之前注册了运行，你的注册之后)。如果您不知道，您需要做一些事情来确保在类更新后调用 updateLogo。

---

来自您的评论:

I don't want to make it work using scroll, but when the class changes...

没有“on class change”事件。您必须确定是什么导致类更改，然后触发任何内容。或轮询(blech)。 :-)

或者做一些理性的事情并使用 CSS 而不是为自己做更多的工作。 :-)

img.affixed {
    display: none;
}
.affix img.normal {
    display: none;
}
.affix img.affixed {
    display: inline;
}

...其中 img class="normal" 是 images/logo.png 图像，img class="affixed"是 second.jpg 图片。