当 navbar-shrink 处于活动状态时更改 img src

Question

我正在使用引导模板，其中导航栏在向下滚动时会缩小。我已将导航栏设为透明，直到它滚动为止，并且只需更改即可变为白色：

.navbar-default {
  background-color: transparent;
}
.navbar-default.navbar-shrink {
  background-color: #fff;
}

现在，由于背景图像，我的徽标大部分是白色的，但我希望在导航栏收缩生效时将其更改为黑色版本。

当“navbar-shrink”类使用 if 语句激活时，我尝试通过更改图像 src attr 来实现它，但它一定有问题。

我尝试了不同的方法并想出了这个：

$(document).ready(function() {
if($('nav').hasClass('navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

或者这个

$(document).ready(function() {
if($('nav').attr('class', 'navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

但两者都不起作用

Answer 1

只需将这两个图像添加到您的源代码中，然后根据 navbar-shrink 类显示/隐藏相应的图像。

<div class="nav">
  <img class="white-image" ... />
  <img class="dark-image" ... />
</div>


.nav .white-image { display:none; }
.nav .dark-image  { display:block; }
.nav.navbar-shrink .white-image { display: block; }
.nav.navbar-shrink .dark-image  { display: none; }

否则，你需要将你的src更改逻辑添加到滚动事件中，否则页面加载时只会调用一次。

$(document).ready(function() {
    $(window).on('scroll', function() {
      if($('nav').attr('class', 'navbar-shrink')) {
        $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
      } else {
        ...
      }
    });
});

请注意，您的 if 语句括号 { } 周围有错误的括号