使用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;
});

Answer 2

使用css类使用jQuery addClass / removeClass / hasClass设置背景样式。

Answer 3

这一行/测试：

if( $(".block_news").css("background","url('/new_skool/images/news_1.jpg')no-repeat"))

...总是会返回等效的true（它返回一个jQuery对象）。

Answer 4

在所有情况下，您都要设置背景。要检索背景值，请丢失css方法中的第二个参数。