javascript - 点击后添加和删除div

Question

演示

在这个演示中，当我单击pop1它时，它会删除 div。然后当我单击pop2它时，将其删除并添加 pop1。

但是当我单击时pop1，它（pop1）应该删除和添加pop0，然后我单击pop2应该删除和添加的位置pop1，当我单击时pop3，pop3应该删除和添加pop2。

JS：

$(".pop").bind('click', function(){
    $('.pop').show();
   $(this).hide();     
})

在我的页面中，必须始终有 3 个框。

Answer 1

我完全不确定您要做什么。在您的示例中，甚至没有 ID 为“pop0”的元素，但我添加了它并默认隐藏它$("#pop0").hide();：

http://jsfiddle.net/kjTBG/16/

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>

JS：

$("#pop0").hide(); // Initially hide #pop0 so it isn't visible.
$(".pop").bind('click', function(){
    $('.pop').show();
   $(this).hide();     
})

请详细说明您要做什么。请改写你的问题并使用整个句子。如果有帮助，请尝试更抽象地描述它。

Answer 2

$("body").on('click', '.pop', function(){
    if($('.pop').length == 3) {
        $('.pop').eq(0).before('<a href="#"><div id="pop0" class="pop"></div></a>');
    }
    $('.pop').show();
   $(this).hide();     
});

这是你想要的？http://jsfiddle.net/kjTBG/17/

编辑：

$("body").on('click', '.pop', function(){
    if($('.pop').length == 3) {
        $('.pop').last().after('<a href="#"><div id="pop0" class="pop"></div></a>');
    }
    $('.pop').show();
   $(this).hide();     
});

http://jsfiddle.net/kjTBG/24/

Answer 3

我认为您只是想交换 ID 以更改颜色。

在这种情况下，试试这个：

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

小提琴：http: //jsfiddle.net/kjTBG/20/

基本上它的作用是这样的：

最初，三个 DIV 的 ID 为“pop1”、“pop2”和“pop3”。

示例 1：当您首先单击“pop1”时，其 ID 变为“pop0”。当您然后单击“pop2”时，其 ID 将更改为“pop1”。等等。

例 2：当你首先点击“pop2”时，它的 ID 变为“pop0”。当您然后单击“pop1”时，其 ID 将更改为“pop2”。等等。

它会跟踪您单击的最后一个“pop”的原始 ID，然后将其与您单击的下一个“pop”的 ID 交换。

Answer 4

像这样？

小提琴

$(".pop").bind('click', function(){
    $('.pop').show();
    $(this).hide().prev().show();
})

Answer 5

这就是你要找的：demo

<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>

$(".pop").bind('click', function(){
    $('.pop').show();
   $(this).hide();     
})