0

トグルで #slidingDiv を下に移動する JavaScript コードのブロックがあります。これにスワップイメージを追加できる方法はありますか? 同じ関数で画像「/images/show-less-arrow.jpg」と「/images/show-more-arrow.jpg」を切り替えるには、#clicktoggleimage という名前の画像が必要です。

<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

クリック機能で画像の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 に答える