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

喜欢这个吗？

<强> fiddle

$(".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();     
})

单击后添加和删除div

5 个答案: