更改图像的页脚切换

Question

感谢您给我机会得到帮助。

我想创建一个切换页脚（滑动面板）。

我发现下面的代码可以正常工作，但我希望能够在滑动面板时更改图像：打开和关闭的图像不同（向上箭头 --> 向下箭头）。

我应该如何继续将此功能与此代码集成？

提前非常感谢！

代码如下：

<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
    if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
        $('html').animate({scrollTop: scrollPos+'px'}, 1000);
    } else {
        $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
    }
                       slide = true;
} else {
                       slide = false;
               }
});
});
</script>

Answer 1

你可以通过改变图片来源来改变图片：

$('.classOfImage').attr('src','/images/up.png');

你的图片必须有你在这里使用的类$('.classOfImage')

<img src="/images/firstimage.pmg" alt="My Image" class="classOfImage" />

您可以这样做以将其集成到您当前的代码中：

var panel = false;

在你的 click 函数之外定义这个变量并设置为 false。

现在添加这个给你的点击功能：

if(!panel){
    $('.classOfImage').attr('src','/images/secondimage.png');
    panel = true;
} else if(panel) {
    $('.classOfImage').attr('src','/images/firstimage.png');
    panel = false;
}

正如我所见，您已经有一个像这样保存面板状态的变量，称为slide，因此您可以像这样使用它：

$(function() {
    var slide = false;
    var height = $('#footer_content').height();

    $('#footer_button').click(function() {

    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var scrollPos = docHeight - windowHeight + height;

    $('#footer_content').animate({ height: "toggle"}, 1000);

    if(!slide) {

        $('.classOfImage').attr('src','/images/secondimage.png'); // LOOK HERE !!

        if($.browser.opera) {
            $('html').animate({scrollTop: scrollPos+'px'}, 1000);
        } else {
            $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
        }
            slide = true;

    } else {

        $('.classOfImage').attr('src','/images/firstimage.png'); // AND HERE !!

           slide = false;
    }

    });
});

注意：jQuery(function($) {与$(function() {相同，if(slide == false)与if(!slide)相同