1

div を左側の div に移動してから、右側の div に戻そうとしています。

選択したdivを左divに表示できる時点で動作しています。

HTML:

<div id="left">

</div>

<div id="right">
    <div class="block">
        Item 1
    </div>
    <div class="block">
        Item 2
    </div>
    <div class="block">
        Item 3
    </div>
    <div class="block">
        Item 4
    </div>
</div>

Jクエリ:

$(".block").click(function() {
    if ($(this).height() < 100) {
        $(this).animate({height:"100px",width:"100px"},500);
        $(this).prependTo("#left");
    }
    else {
        $(this).animate({height:"50px",width:"50px"},500);
    }
});

(Jsfiddle も参照してください: http://jsfiddle.net/MMTu7/ )

prependTo または appendTo メソッドを使用して、div を正しい div に戻すこともできますが、順序が間違っている可能性があります...

ある種の履歴メソッドなどがあるので、div をクリックする前に順序を戻すことができますか?

4

2 に答える 2

0

http://jsfiddle.net/MMTu7/1/

$('.block').each(function( i ){
    $(this).addClass('idx'+i);
});

$("#left, #right").on('click', '.block', function() {

    var myIdx = $(this).attr('class').split(" ")[1];
    //alert(myIdx)
    if ($(this).height() < 100) {
        $(this).clone().prependTo('#left').animate({height:100, width:100},500);
        $(this).hide();
    }
    else {
        $(this).animate({height:50, width:50},500, function(){
            $("#right ."+myIdx).show();
            $(this).remove();           
        });
    }

});
于 2013-04-24T11:54:31.873 に答える
0

これを使ってみてください。

$('.block').click(function() {
    if ($(this).height() < 100) {
        $(this).animate({height:'100px',width:'100px'},500);
        $(this).prependTo('#left');
    }
    else {
        $(this).prependTo('#left');
        $(this).animate({height:'50px',width:'50px'},500);
    }
});

あなたのdivは並べ替えられます。

http://jsfiddle.net/SanketS/MMTu7/2/

于 2013-04-24T11:58:43.263 に答える