jQuery 多个选择器进入动态属性

发布于 2024-10-09 15:46:48 字数 357 浏览 1 评论 0原文

我正在尝试将事件附加到单独的悬停触发器。但由于它是动态的，我在使用多个选择器时遇到了问题。

需要帮助 ::: 将鼠标悬停在名为“Rings”的黄色框上时，应该会触发其上方绿色框的动画幻灯片事件。

$('.boxgrid1').hover(function(){  
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});  
}, function() {  
    $(".cover", this).stop().animate({top:'247px'},{queue:false,duration:300});  
});

原文

I am trying to attach an event to a separate onhover trigger. But I am having problems using multiple selectors since its dynamic.

Need help ::: Upon hovering on the yellow box named 'Rings', this should trigger the animated slide event for the green box above it.

$('.boxgrid1').hover(function(){  
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});  
}, function() {  
    $(".cover", this).stop().animate({top:'247px'},{queue:false,duration:300});  
});

分享到QQ

分享到微博

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

发布评论

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

谁人与我共长歌 2024-10-16 15:46:48

通过一些标记调整，我们可以大大简化您的代码，例如，让我们为这些悬停

元素提供一个公共类，如下所示：

<div class="boxgrid boxgrid1">

然后您的代码就变成更更简单，您可以用以下代码替换所有重复的代码：

$('.boxgrid .cover').css({ top: '247px' });

$('.boxgrid').hover(function() {
    $(".cover", this).stop().animate({ top: '0px' }, 300);
}, function() {
    $(".cover", this).stop().animate({ top: '247px' }, 300);
});
$("#shop_buttons_table tr:nth-child(2)").delegate("td", "mouseenter mouseleave", function(e) {
    $("#shop_buttons_table tr:nth-child(1) .boxgrid").eq($(this).index()).trigger(e);
});

您可以测试它在这里，我们所做的就是从下部单元格获取“hover”事件并将它们传递到前一行中的 .boxgrid 元素上，最终效果（使用 < a href="http://api.jquery.com/stop/" rel="nofollow">.stop() 调用您已有的）是一个可悬停区域用户。

With a few markup tweaks we can greatly simplify your code, for example let's give those hover <div> elements a common class as well, like this:

<div class="boxgrid boxgrid1">

Then your code becomes much simpler, you can replace all that repeated code with this:

$('.boxgrid .cover').css({ top: '247px' });

$('.boxgrid').hover(function() {
    $(".cover", this).stop().animate({ top: '0px' }, 300);
}, function() {
    $(".cover", this).stop().animate({ top: '247px' }, 300);
});
$("#shop_buttons_table tr:nth-child(2)").delegate("td", "mouseenter mouseleave", function(e) {
    $("#shop_buttons_table tr:nth-child(1) .boxgrid").eq($(this).index()).trigger(e);
});

You can test it out here, all we're doing is taking the "hover" events from the lower cells and passing them onto the .boxgrid elements in the row before, the net effect (with the .stop() calls you already had) is a single hoverable area for the user.

回复收藏 0 原文