单击后添加和删除div

演示

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

但是当我点击pop1 ，它（pop1）应该删除并添加pop0 ，然后我点击pop2它应该删除并添加pop1 ，当我点击pop3 ， pop3应该删除并添加pop2 。

JS：

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

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

我完全不确定你要做什么。在你的例子中甚至没有一个带有“pop0”ID的元素，但我添加了它并默认用$("#pop0").hide();它$("#pop0").hide(); ：

HTML：

JS：

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

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

我想你只是想交换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交换出来。

像这样？

小提琴

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

 $("body").on('click', '.pop', function(){ if($('.pop').length == 3) { $('.pop').eq(0).before(''); } $('.pop').show(); $(this).hide(); });

编辑：

 $("body").on('click', '.pop', function(){ if($('.pop').length == 3) { $('.pop').last().after(''); } $('.pop').show(); $(this).hide(); });

这就是你要找的： demo

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