0

私はJQueryにまったく慣れていないので、まだ学んでいるので、これについて助けが必要です。バナー付きの Web ページがあり、画面サイズが 480 ピクセル以下の場合、バナーを一時的な画像に置き換えて、モバイル ユーザー向けに高速化します。とても良いです。しかし、今問題に。ユーザーがこの一時的な画像をクリックすると、古い画像に戻ります。この場合、バナー。どうすればこれを達成できますか?

これまでの私のコード:

$("document").ready(function() {
    if ( $(window).width() <= 480) {
            $("#img").attr("src", "temp_image.jpg");
    }
});

そしてHTML：

<div id="banner">
     <a href="#"><img id="img" src="banner.jpg" alt="banner" /></a>
</div>
4

3 に答える 3

0

コードは正常に見えます。docreadyステートメントの周りのドキュメントから「」を削除するだけでコードが機能すると思います。画像を元に戻すには、次の行に沿って何かを使用できます。

$(document).on('click','#img',function() {
    if( $(this).attr('src') === 'temp.jpg' ) 
    {
         $(this).attr('src','mainimg.jpg')
    }
});

ただし、img要素をクリックして離れた場合に、小さい画像に戻すかどうかはわかりません。

于 2013-03-06T10:54:08.403 に答える
0

あなたが要求したことを正確に行うには、クリック ハンドラーを img にアタッチし、ドキュメントの読み込み時と同じ方法で画像を置き換えることができます。例えば

$('#img').click(function(){
    $("#img").attr("src", "banner.jpg");
    //following line to unbind the click handler so it doesnt keep firing (even though it wont do anything)
    $('#img').unbind();
});

ただし、Sergiosの回答は、あなたが望むものには適していると思います.

心に留めておくべきことが1つあります。あなたはそれが「モバイルユーザーにとってより速くなる」と言いますが、この時点でバナー画像はすでにロードされており、別の画像に置き換えているだけです.1つではなく2つの画像をロードしているため、実際には遅くなります. 見た目は良くなりますが、速くなるとは思いません。スティックの端が間違っている場合は、修正してください。

于 2013-03-06T10:59:19.483 に答える
0

html を次のように少し変更できます。

<div id="banner">
     <a href="#"><img id="img" src="banner.jpg" alt="banner" data-big="banner.jpg" data-small="test_image.jpg"/></a>
</div>

結果の js は次のようなものになる可能性があります (ハードコーディングされたリンクを避けるため): 

$("document").ready(function() {
    if ( $(window).width() <= 480) {
            $("#img").attr("src", $("#img").data("small"));
    }

    $("#img").on("click", function () {
        var img = $("#img");
        if (img.attr("src") != img.data('big') {
            img.attr("src") = img.data('big');
        }
    });
});

イメージ src を小さなサイズに戻す方法は、処理方法によって異なりますが、今のところわかりません :)

于 2013-03-06T11:01:11.570 に答える