用于悬停在Div上的jQuery图像交换

Question

$(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 or unique name).show();

Answer 1

如果您仍然想使用哈希，则可以使用以下代码（假设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();
        }
    );
});