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

发布于 2024-07-17 07:40:02 字数 694 浏览 6 评论 0原文

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荆棘i 2024-07-24 07:40:03

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

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

回复收藏 0 原文

~没有更多了~