0

次のようなクリック可能なdivがあります

<a href="/go/to/link">
<div class="background-image"></div>
</a>

suerをリダイレクトする前に、そのdiv onclickの背景画像を切り替えたいです。

私はこれをやっています

$(document).ready(function(){
        $(".background-image").click(function() {
            $(this).css('background-image', 'url(/newimage)');
        });
    });

これは機能せず、画像をクリックしても読み込まれません。ただし、このように return false を追加すると

$(".background-image").click(function() {
            $(this).css('background-image', 'url(/newimage)');
                    return false;
        });

画像は表示されますが、ページはリンクにリダイレクトされません。ここで何ができますか。ありがとう

4

2 に答える 2

1

編集：実際に画像をキャッシュせずに元のソリューションを試してみましたが、うまくいきませんでした。次のようにするとうまくいくはずです：

http://jsfiddle.net/ma2zY/4/

$(document).ready(function () {
    $(".background-image").click(function (e) {
        var that = this;
        e.preventDefault();
        $('<img/>').attr('src', 'http://www.gq.com/images/style/2012/04/simpsons-style/simpsons-96.jpg').load(function () {
            $(that).css('background-image', 'url(http://www.gq.com/images/style/2012/04/simpsons-style/simpsons-96.jpg)').delay(1).queue(function () {
                window.location = $(that).closest('a').prop('href');
            });
        });
    });
});

これにより、イメージがロードされ、イメージがロードされるのを待ってから、スワップアウトして続行します。また、必要に応じてより長く待機させるために使用できるa も追加しましたdelay()。現在は 1 に設定されていますが、実際には何もありません。

于 2013-06-25T01:13:23.510 に答える