jQuery将多个选择器转换为动态属性

Question

我试图将事件附加到单独的onhover触发器.但是由于它的动态,我在使用多个选择器时遇到了问题.

需要帮助:::当悬停在名为'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});  
});

Answer 1

通过一些标记调整，我们可以大大简化您的代码，例如，让我们<div>也为这些悬停元素提供一个公共类，如下所示：

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

您可以在这里进行测试，我们所做的就是从下部单元格获取“悬停”事件并将它们传递到.boxgrid之前行中的元素上，最终效果（使用.stop()您已经进行的调用）是一个可悬停区域对于用户来说。