javascript - 使用 jQuery 进行背景更改不起作用

Question

我有一个菜单，它使用 jQuery 插件来更改主页上 div 的内容，直到这里一切似乎都工作正常，从这里我只想用每个内容更改网站的背景图像。

我的页面中有以下标记：

<nav>
  <ul>
    <a id="home" href="/" class="switcher">
      <li class="link">Home</li>
    </a>
    <a id="wid" class="switcher">
      <li>Content One</li>
    </a>
    <a id="srv" class="switcher">
      <li>Content Two</li>
    </a>
    <a id="cnt" class="switcher">
      <li>Content three</li>
    </a>
  </ul>
</nav>

我在我的 js 文件中编写了以下 jQuery 代码：

$("nav a").click(function () {
    $('body').css('background-image', 'url(../../Content/img/ ' + (this).id + '.jpg)').fadeIn('fast');
});

但这整件事不起作用，我已经搜索过了，但从这些信息中我认为我的代码没问题，当然不是。那里有一些愚蠢的错误，但我就是想不通，如果有人能为我指出这一点，我将不胜感激。谢谢你。

Answer 1

你应该做

$(function(){
    $("nav a").click(function() {
        $('body')
          .css('background-image', 'url(../../Content/img/' + (this).id + '.jpg)')
          .fadeIn('fast');
    });
});

所以你只是忘记了 Document Ready 部分：

$(function(){

//put your code here

});