0

我目前正在完成一个 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>
4

1 回答 1

0

您可以尝试使用 jQuery 的.css()方法，该方法允许更改对象的任何 css 属性。否则，您可以尝试使用不同的类（fe.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>
于 2013-09-07T13:36:21.290 回答