Question

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

非常感谢

皮特

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");
    });
});

（? :位是ternary operator，简写为：）

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'，反之亦然。

或

Take a look at sprites.

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/

Answer 4

您可以在点击功能中更新图像的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>

点击图片切换（功能）

4 个答案: