jquery - 使用 if/else 在 Jquery 中切换/更改 CSS 背景图像

Question

已经花了好几个小时了请帮忙

   $("#NewsReel").click(function(){
   if( $(".block_news").css("background","url('/new_skool/images/news_1.jpg')no-repeat"))
   {
   $(".block_news").css("background","url('/new_skool/images/news(2).jpg')no-repeat");
   }
   else
   {
   if( $(".block_news").css("background","url('/new_skool/images/news(2).jpg')no-repeat"))
   {
   $(".block_news").css("background","url('/new_skool/images/news_1.jpg')no-repeat");
   }
   }
   });

谢谢

它更改图像一次，但随后不会触发第二个 if 语句。

Answer 1

获取背景值不是以这种方式执行的。您需要使用:

if ($('element').css('background') == 'value') {
   ...
}

此外，不能保证 jQuery 不会优化或完全按照您设置背景的方式设置背景。例如，它可能返回如下值:

no-repeat url('/new_skool/images/news(2).jpg')

最好创建两个 CSS 类并仅使用 toggleClass()更改背景图像，例如 this demo

HTML

<ul id="NewsReel">
    <li class="block_news">news</li>
</ul>​

CSS

li {
   background:url('http://lorempixel.com/25/25/abstract/1/') no-repeat;
}

li.clicked {
    background:url('http://lorempixel.com/25/25/abstract/2/') no-repeat;
}

JavaScript(jQuery)

$("#NewsReel").click(function() {
    $('.block_news').toggleClass('clicked');
    return false;
});

​