Question

我在使用animate函数处理特定的div时遇到了一些麻烦。我正在页面上显示x个视频。每个视频都有一个名为的类，在其下方显示描述。我在文本右侧有另一个div，其背景图像表示用户单击以展开描述的图标。单击它时，描述会扩展已定义的像素数。此代码工作正常，但是当您单击图标以展开它时，它会扩展所有视频描述，因为它们共享同一个类。我不想使用不同的ID，因为当有数百个视频时，它会失控。我是jQuery的新手，但是已经研究过遍历并尝试使用父级和壁橱，我觉得这可能是如何实现的，但无法绕过它。任何帮助，将不胜感激。

HTML

<div class="video">
   <div class="text">Text text</div>
   <div class="icon"><a class="clickme"></a></div>
</div>

JQuery：

$('.clickme').toggle(function() {
        $('.text').animate({height:'100px'});
    }, 
    function() {
        $('.text').animate({height:'40px'});
});

Answer 1

您应该使用closest()：

$('.clickme').toggle(function () {
    $(this).closest('.video').find('.text').animate({
        height: '100px'
    });
}, function () {
    $(this).closest('.video').find('.text').animate({
        height: '40px'
    });
});

Answer 2

试试这个 -

$('.clickme').click(function(e) {
   e.preventDefault();
   $(this).parent().siblings('.text').animate({height:'100px'});
}, function() {
    $(this).parent().siblings('.text').animate({height:'40px'});
});

Answer 3

以这种方式使用的切换函数是deprecated and removed，您需要某种标记，并且需要定位每个.text元素，而不是所有元素：

$('.clickme').click(function() {
    var elem = $(this).closest('.video').find('.text');

    if (elem.data('state')) {
        elem.data('state', false).animate({height:'40px'});
    }else{
        elem.data('state', true).animate({height:'100px'});
    }
});

FIDDLE

动画个人div共享同一个类

3 个答案: