0

製品ページに製品の色合いのリストがあります。

ページには大きな画像もあります。

色合いリストの小さなサムネイルの 1 つにカーソルを合わせて、代わりに大きな画像に表示できるようにしたいと考えています。

次のコードがありますが、これは正しくありません。を変更する代わりに、mainpicホバーされている画像を変更します....

$('img[data-hover]').hover(function () {
    $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');

}).each(function () {
    $('<img />').attr('src', $(this).attr('data-hover'));
});​

ここに JS Fiddle がありますが、ご覧のとおり、期待どおりに機能しません。

大きな写真に影響を与えるホバリングの代わりに、ホバリングされている同じ画像に影響を与えます。

ライブサイトは、私が何を意味するかをより明確に理解するためにここにあります:

Ruby Tuesday クリエイティブ サイト

4

1 に答える 1

1

このデモを確認してください: http://jsfiddle.net/Uc9ch/8/

コード：

var mi = $('#mainImage');

// this code will do the rest for you
$('img[data-hover]').hover(function () {
    mi.data('prevsrc', mi.attr('src')).attr('src', $(this).attr('data-hover'));
}, function() {
    mi.attr('src', mi.data('prevsrc'));     
});

アップデート：

あなたのページにはいくつかの問題があるようです。

a) script タグを で閉じていません</script>。ソースを表示すると、最後のスクリプト タグ (上記のコードを含むタグ) が閉じられていないことがわかります。

b) 上記のコード$(document).ready(function() { <insert-above-code-here> });は、DOM の準備ができてロードされていることを確認するために、ブロック内に入る必要があります。

つまり、そうあるべきです

<script>
$(document).ready(function() { 

    var mi = $('#mainImage');

    // this code will do the rest for you
    $('img[data-hover]').hover(function () {
        mi.data('prevsrc', mi.attr('src')).attr('src', $(this).attr('data-hover'));
    }, function() {
        mi.attr('src', mi.data('prevsrc'));     
    });

}
</script>
于 2012-10-20T13:44:13.003 に答える