用jQuery设置css背景图片

Question

单击标题时尝试在两个图像之间切换。对于初学者来说，我甚至还没能让他们出现。有什么想法吗？

<h2 class="expand" id="content-1" style="cursor:pointer;" value="One">Click to expand One</h2>
<h2 class="expand" id="content-2" style="cursor:pointer;" value="Two">Click to expand Two</h2>

下面试过了，但到目前为止什么也没有。

 $('.expand').on('click', function() {
              if($(this).text().indexOf('expand') >0 )
              $(this).text('Click to collapse ' + $(this).attr("value"));
                $('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')');
               else
                   $(this).text('Click to expand ' + $(this).attr("value"));
                 $('.expand').css('background-image', 'url(' + img/down-up.gif + ')');  
            });

和

$(this).text('Click to collapse ' + $(this).attr("value") + $(this).css...);

Answer 1

您最简单的选择是切换类名并在CSS中定义图像。

$('.expand').toggleClass('someClass')


.someClass {
     background-image:url(...);
}

Answer 2

这一点：

 $('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')');

可能是这样的：

 $('.expand').css('background-image', 'url("img/arrow-up.gif")');

但我支持Diaodeus，这应该在CSS和你的jQuery中指定，只是简单地交换类名。我也会把你的图片变成一个精灵，所以它只是一张图片。