0

我有一段 javascript 代码在切换时将#slidingDiv 向下移动。无论如何我可以在其中添加交换图像吗？我需要一个名为#clicktoggleimage 的图像来在同一函数中的图像“/images/show-less-arrow.jpg”和“/images/show-more-arrow.jpg”之间交换。

<script type="text/javascript">

$(document).ready(function() {

$("#slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function() {
    $("#slidingDiv").slideToggle(500);
    $('html,body').animate({
      scrollTop: $("#slidingDiv").offset().top + $('window').height()
    }, 1000);
});
});

</script>

非常感谢

皮特

4

4 回答 4

1

您可以像这样切换图像src：

$(document).ready(function() {
    var image = document.getElementById('clicktoggleimage');

    $("#slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function() {
        $("#slidingDiv").slideToggle(500);
        $('html,body').animate({
            scrollTop: $("#slidingDiv").offset().top + $('window').height()
        }, 1000);
        // New code here:
        image.src = (image.src.indexOf('show-more') > -1")
            ? image.src.replace("show-more", "show-less")
            : image.src.replace("show-less", "show-more");
    });
});

（该? :位是一个三元运算符，简写为:)

if(image.src == "/images/show-less-arrow.jpg"){
    image.src = "/images/show-more-arrow.jpg"
}else{
    image.src = "/images/show-less-arrow.jpg"
}

编辑：

现在src将根据当前是否src包含更改'show-more'。如果是，'show-more'则替换为'show-less'，反之亦然。

或者，

看看精灵。

于 2012-12-20T14:29:04.537 回答
0

您可以在 click 函数中更新图像的 src 属性。像这样的东西应该工作：

<script type="text/javascript">

$(document).ready(function() {

$("#slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function() {

    var srcless "/images/show-less-arrow.jpg";
    var srcmore = "/images/show-more-arrow.jpg";

    if($('#clicktoggleimage').attr("src") == srcless){
        $('#clicktoggleimage').attr("src",srcmore);
    }else{
        $('#clicktoggleimage').attr("src",srcless)
    }

    $("#slidingDiv").slideToggle(500);

    $('html,body').animate({
      scrollTop: $("#slidingDiv").offset().top + $('window').height()
    }, 1000);
});
});

</script>
于 2012-12-20T14:41:44.970 回答
0

使用属性的另一种方式

HTML

<img id="foo" src="/../img/logo.png">
<button id="btn">Flip</button>

JavaScript

$("#btn").on("click", function() {
    $("#foo").attr("src", function(a,b){ 
        return (b === "/../img/logo.png") ? "http://www.google.com/textinputassistant/tia.png" : "/../img/logo.png";
    }); 
});​

示例：http: //jsfiddle.net/AY2xX/

于 2012-12-20T14:33:54.153 回答
0

我建议使用jQuery.toggleClass()在元素上切换 CSS 类。然后定义 CSS 以使用精灵作为该元素的背景图像。您可以编写 JavaScript 来交换图像，但这种方式更干净，最终也更容易。

$('.show_hide').click(function() {

    // add this
    $(this).toggleClass("isShown");

    $("#slidingDiv").slideToggle(500);
    $('html,body').animate({
        scrollTop: $("#slidingDiv").offset().top + $('window').height()
    }, 1000);
});

CSS

.show_hide {
    background: url('images/showHideSprite.png') no-repeat 0px 0px;
}

.show_hide.isShown {
    /* change offset on sprite to show only the "shown" image */
    background-position: 20px 0px;
}
于 2012-12-20T14:28:09.483 回答