0

アニメーション機能を特定の 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'});
});
4

3 に答える 3

0

これを試して - 

$('.clickme').click(function(e) {
   e.preventDefault();
   $(this).parent().siblings('.text').animate({height:'100px'});
}, function() {
    $(this).parent().siblings('.text').animate({height:'40px'});
});
于 2013-05-06T19:41:24.243 に答える
0

そのように使用されるトグル関数は廃止され、削除されました。何らかのフラグが必要であり.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'});
    }
});

フィドル

于 2013-05-06T19:41:52.080 に答える
0

使用する必要がありますclosest()：

$('.clickme').toggle(function () {
    $(this).closest('.video').find('.text').animate({
        height: '100px'
    });
}, function () {
    $(this).closest('.video').find('.text').animate({
        height: '40px'
    });
});
于 2013-05-06T19:41:14.153 に答える