JQuery 不能在 Chrome 中工作？

Question

我正在尝试通过 Jquery 更改它的 CSS 来更改 div 的背景图像，我让它在 FireFox 中工作，但由于某种原因它在 chrome 中没有做任何事情，我尝试清除缓存但仍然没有运气，控制台也没有错误，这是我的代码：

$(document).ready(function() {
    var bg = 1;
  $("#changePic").click(function () {
    if (bg == 1)
    {
        $("#outerWrapper").css("background-image","url(images/background-lodge1.jpg");
        bg=2;
    }
    else if (bg == 2)
    {
        $("#outerWrapper").css("background-image","url(images/background-lodge2.jpg");
        bg=3;
    }
    else
    {
        $("#outerWrapper").css("background-image","url(images/background-lodge.jpg");
        bg=1;
    }
  });
});

然后我的链接是这样的：

<a href="#" id="changePic"><span class="sidetab">Next Photo <img src="images/arrow.png" alt="" width="10" height="14" align="absmiddle" /></span></a>

关于为什么这可以在 Firefox 中工作但不能在 chrome 中工作的任何想法？

Answer 1

我不能确定为什么它不起作用，因为 #outerWrapper 不在您发布的标记中。还有这个脚本在哪里？是否可能没有正确包含它，可能是格式错误的 <script> 标签 Chrome 不喜欢？

我可以提供一种简化它的方法，并且仍然可以跨浏览器兼容，您可以使用.toggle() 代替，如下所示：

$(function() {
  $("#changePic").toggle(function () {
    $("#outerWrapper").css("background-image","url(images/background-lodge1.jpg");
  }, function() {
    $("#outerWrapper").css("background-image","url(images/background-lodge2.jpg");
  }, function() {
    $("#outerWrapper").css("background-image","url(images/background-lodge.jpg");
  });
});