-8

4s登場してほしいdivです。のいずれかをクリックすると、最後に移動しdivたいと思います。div

したがって、たとえば、最初の div をクリックすると、最後の div になるはずです。

HTML:

<a href='#'><div id="pop0" class="pop"></div></a>
<a href='#'><div id="pop1" class="pop"></div></a>
<a href='#'><div id="pop2" class="pop"></div></a>
<a href='#'><div id="pop3" class="pop"></div></a>

CSS:

#pop0 {
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
}
#pop1 {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}
#pop2 {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
}
#pop3 {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
}

jQuery:

var id = "pop0";
$(".pop").bind('click', function(){
    var oldId = $(this).attr('id');
    $(this).attr('id', id);
    id = oldId;
})

デモ

4

3 に答える 3

2

このコードを試してください

JS

$(".pop").on('click', function() {
    // Get the closest anchor container
    var $a =$(this).closest('a');
    // Insert after the last anchor container
    $a.insertAfter('a:last')
})

またbind、 によって置き換えられましたon。それを使用して、イベント ハンドラーをバインドします。

また、同じスタイルを繰り返さないことで、HTML を少しクリーンアップできます。共通のスタイルを同じクラスに移動します。

CSS

.pop{
    width: 100px;
    height: 100px;
    position: relative;
}

#pop0 {
    background: yellow;
}
#pop1 {
    background: red;
}
#pop2 {
    background: blue;
}
#pop3 {
    background: green;
}

フィドルをチェック

于 2013-08-09T17:30:52.210 に答える
1

おそらく、アイテムを切り離して、コンテナの最後に追加するだけですか?

$(document).on('click','.pop',null,function(){
    var $pop = $(this);
    var $parent = $pop.parent();
    $pop.detach();
    $parent.append($pop);
});

http://jsfiddle.net/rtpt5/3/

于 2013-08-09T17:31:22.203 に答える
1

DOMラッパー要素がないため、コードを使用するのは悪いことです...（本体を除く）

$(".pop").bind('click', function(){
    $('body').append($(this).parent());
})

デモ

于 2013-08-09T17:30:32.490 に答える