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”类时更改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回调中，并在添加/删除课程后运行（如果你根据课程改变。 <{1}}仅在加载和解析页面时运行一次。

例如，您可以这样做：

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。

来自你的评论：

我不想让它使用滚动，但是当班级改变时......

没有“课堂改变”事件。你必须确定导致类更改的原因，然后触发它。或民意调查（blech）。： - ）

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

updateLogo

...其中img.affixed { display: none; } .affix img.normal { display: none; } .affix img.affixed { display: inline; }是img class="normal"图片，images/logo.png是img class="affixed"图片。

“.hasClass”，if语句不起作用

1 个答案: