用於懸停在 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();
        }
    );
});