用于悬停在 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
    );
});

This .js script works for a mouseover on an anchor tag. However, I would like this function to work on an entire div.

How do I change this part : .filter(this.hash).show();

to this : .filter(this.(id or unique name).show();

Answer 1

If you still want to use the hash you could get it using this code (assuming that this is your div):

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

If you want to use something unique about the div I've used the id of the div equal to the className of the img before.

If you had this html:

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

You could use something like this, (I changed your hover to a mouseover, since you were only using that):

$(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();
        }
    );
});