Question

点击时切换图像（功能）

2012-12-20

846

javascript jquery html click toggle

我有一段 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>

非常感谢

Pete

Answer 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 是否包含 'show-more' 来更改 src 。如果确实如此，则 'show-more' 将被 'show-less' 替换，反之亦然。

或者，

查看精灵。

Answer 2

我建议使用 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;
}

Answer 3

使用属性的另一种方法

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/