jQuery滚动图像src更改问题

Question

您好！

我在使用jQuery时遇到了一些可怕的问题。如果用户滚动页面，我希望我的脚本更改徽标图像。非常简单，但它不起作用。一旦我滚动页面，图片就会消失，并且在我返回页面顶部后不会再回来。对不起新手问题，但我已经和它一起战斗了3个小时。像http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/这样的东西并没有帮助。我确定我的图片来源是正确的，因为页面加载时会加载大徽标。

JavaScript的：

$(document).ready(function() {

  $(document).scroll(function() {
    if ($(document).scrollTop()>1){
        $('#logo').attr('src', "Source\Pictures\Logo_small.jpg");
      }
    else {
        $('#logo').attr('src', "Source\Pictures\Logo.jpg");
      }
    });
});

HTML：

<img src="Source\Pictures\Logo.jpg" id="logo">

<script src="Source\JavaScript\jquery-3.2.0.js"></script>
<script type="text/javascript" src="Source\JavaScript\index.js"></script>

滚动前：

滚动后：

Answer 1

在字符串中使用反斜杠（\）时，应将它们加倍（\\）。这是因为反斜杠是转义字符，因此字符串的内容可能与您期望的不同。

$(document).ready(function() {

  $(document).scroll(function() {
    if ($(document).scrollTop()>1){
        $('#logo').attr('src', "Source\\Pictures\\Logo_small.jpg");
      } else {
        $('#logo').attr('src', "Source\\Pictures\\Logo.jpg");
      }
    });
});

理想情况下，您应该使用正斜杠，因为反斜杠只能在Windows上本地工作。 Windows中也支持正斜杠。

$(document).ready(function() {

  $(document).scroll(function() {
    if ($(document).scrollTop()>1){
        $('#logo').attr('src', "Source/Pictures/Logo_small.jpg");
      } else {
        $('#logo').attr('src', "Source/Pictures/Logo.jpg");
      }
    });
});