Question

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

我目前有：

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

请跟我一起露面，因为我对jQuery很新，但到目前为止，我已经知道了，我觉得我离其他人不太远，但我似乎无法弄清楚如何改变背景？ / p>

感谢任何方向/链接或帮助。

新的代码编辑：

<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属性。否则，您可以尝试使用不同的类（f.e。.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>

用jQuery交换背景图像

1 个答案: