Question

我无法弄清楚为什么这张图片没有改变。我将在下面提供相关的HTML，CSS和jQuery。

HTML

<nav id="desktop-nav">
  <div class="logo">
    <a href="#"></a>
  </div>
  <div> ... </div> 
  ...

CSS

nav#desktop-nav .logo a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../path/to/image-logo-white.png");
  background-size: 50px 50px;
}

的jQuery

$(document).ready(function(){
  $(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()) {
      $("nav#desktop-nav .logo a").attr("src", "../path/to/image-logo.png");
    }
})

注意： 我已经测试了这个功能，它确实有效（我改变了文本的颜色）：

$("#desktop-nav #main-nav .main-nav-center .main-nav-list li a").css({"color":"black"});

在这里帮助我，我做错了什么？

Answer 1

a没有src属性。所以它不会工作：

 $("nav#desktop-nav .logo a").attr("src", "../path/to/image-logo.png");

为了解决这个问题，我看到了快速的方法：

CSS

nav#desktop-nav .logo a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../path/to/image-logo-white.png");
  background-size: 50px 50px;
}

nav#desktop-nav .logo a.another-logo {
    /* OVERRING ANOTHER LOGO HERE*/
   background-image: url("../path/to/image-logo.png");
}

的jQuery

$(document).ready(function(){
  $(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()) {
      $("nav#desktop-nav .logo a").addClass('another-logo');
    }
    else {
       $("nav#desktop-nav .logo a").removeClass('another-logo');
    }
})

使用jQuery更改图像

1 个答案: