单击后添加和删除 div [关闭]答案

【问题标题】：add and remove div after click [closed]单击后添加和删除 div [关闭]
【发布时间】：2013-08-09 16:32:41
【问题描述】：

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

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

JS：

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

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

【问题讨论】：

没有pop0。要动态创建 pop0 吗？
查看演示。在css中有pop0。我需要将 pop1 替换为 pop0。
无法真正说出你想要什么，但这总是有 3 个盒子 jsfiddle.net/kjTBG/18
好吧，您并没有真正删除或添加任何东西，只是隐藏或显示它。另外你为什么要隐藏然后显示一些东西？没有意义
您能否解释一下是否有任何答案至少部分与您尝试做的事情相关？如果我们知道现有解决方案的错误/正确之处，就更容易找到正确的解决方案。

标签： javascript jquery css

【解决方案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();     
})

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

【讨论】：

【解决方案2】：

我认为您只是在尝试交换 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 交换。

【讨论】：

我需要改变主意。我需要出现所有 4 个 div，但是当我单击 pop0 时，它应该消失并从 div 的末尾出现（我的意思是在 pop3 之后）。

【解决方案3】：

像这样？

fiddle

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

【讨论】：

【解决方案4】：

$("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/

【讨论】：

是的，这就是我所看到的。但如果你请原谅，我需要改变想法。我需要出现所有 4 个 div，但是当我单击 pop0 时，它应该消失并从 div 的末尾出现（我的意思是在 pop3 之后）。

【解决方案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();     
})

【讨论】：

不，不是。他说他希望三个始终可见。