悬停在Div上的jQuery图像交换

时间:2009-04-20 17:14:17

标签: jquery image swap

    $(document).ready(function(){
        // Hide all large images except the first one
        $('#imageContainer img').hide().filter(':first').show();
        // Select all thumb links
        $('#thumbContainer a').hover(function(event) {
                // Hide all large images except for the one with the same hash as our thumb link
                $('#imageContainer img').hide().filter(this.hash).show();
            },
            function () {} // Because the hover method has a mouseout state we need to define too
        );
    });

此.js脚本适用于锚标记上的鼠标。但是,我希望这个函数能够处理整个div。

如何更改此部分:.filter(this.hash).show();

到:.filter(this。(id或唯一名称).show();

谢谢。

小心。

1 个答案:

答案 0 :(得分:0)

如果您仍想使用哈希,可以使用此代码获取它(假设this是您的div):

var hash = $(this).find('a').get(0).hash;

如果你想使用div的独特之处,我之前使用的div的id等于img的className。

如果你有这个html:

<div id="container1" class="thumbContainer"></div>
<div id="imageContainer">
  <img src="" alt="" class="container1" />
</div>

你可以使用这样的东西,(我将你的悬停改为鼠标悬停,因为你只是使用它):

$(document).ready(function(){
    // Hide all large images except the first one
    $('#imageContainer img').hide().filter(':first').show();
    // Select all thumb links
    $('.thumbContainer').mouseover(function(event) {
            // Hide all large images except for the one with the same hash as our thumb link
            $('#imageContainer img').hide().filter("." + this.id).show();
        }
    );
});