用jQuery交换背景图像

Question

我目前正在完成一张jQuery幻灯片，该幻灯片使用户能够单击div，然后向下滑动div。但我想做的是在div.slide 关闭时更改它的背景图像，所以我有一个向上箭头，然后是每个状态的向下箭头。

我目前有：

<script type="text/javascript">
     $("div.slide").click(function(){
         $(".tst").slideToggle( 'slow', function(){ });
      });
</script>

到目前为止，我

有上面的内容，感觉我离其他人不太远，但我似乎无法弄清楚如何改变背景？

新代码编辑：

<script type="text/javascript">
    $('.tst').hide();
     $("div.slide").click(function(){
         $("div.slide").css('background-image', 'url("http://universitycompare.com/wp-content/themes/blue-and-grey/images/upward_arrow.jpg")');
         $(".tst").slideToggle( 'slow', function(){
         });
      });
</script>

Answer 1

您可以尝试使用 jQuery 的 .css() 方法，该方法允许更改对象的任何 css 属性。否则，您可以尝试使用不同的类（例如 .bg1和.bg2）并用.addClass()/.removeClass()或toggleClass()更改它们。

最好

等到对象淡出后再更改背景，因此请使用以下命令：

与.css()

<script type="text/javascript">
     $("div.slide").click(function(){
         $(".tst").slideToggle( 'slow', function(){
             $(this).css('background-image',...)
         });
      });
</script>

与.toggleClass()

首先，我们需要两个类（或子类）：

div.slide.up_arrow{
    background-image: url("http://universitycompare.com/wp-content/themes/blue-and-grey/images/upward_arrow.jpg");
}
div.slide.down_arrow{
    background-image: url('...');
}

我们应该首先添加其中一个，然后为每次点击切换。

<script type="text/javascript">
    $('.tst').hide();
    $("div.slide").addClass('up_arrow')
     $("div.slide").click(function(){
         $("div.slide").toggleClass('up_arrow').toggleClass('down_arrow');
         $(".tst").slideToggle( 'slow', function(){
         });
      });
</script>