Question

我正在尝试使用三个链接，当您单击它们时将显示div。如果再次单击这些链接，将显示该链接的其他类型。例如，如果我有链接one，点击它就会生成div one。再次单击它将生成div one1。这样，每个元素都有一个唯一的id，并且可以在以后将自定义样式应用于各个div。

当用户点击其中一个a链接时，它会创建一个localStorage键，用于显示单击该类型div的次数。例如，如果我单击div one的行5次，则localStorage键将为5.然后，当重新加载页面时，我的脚本将div复制到页面上5次，并设置第1部分到第5部分的计数器。这样，当您再次开始单击a链接时，它们不会从1开始，而是从5开始，因此它们不是任何冲突的ID。

我遇到的问题是删除功能。假设用户重复5 div one。这意味着one1, one2, one3, one4, one5都出现在屏幕上。如果用户重新加载页面，它们仍然存在。假设用户从页面中删除了div1。它会删除div1以及与之关联的所有样式，并将其他div留下来......

但是，如果你重新加载页面，脚本会从1-4开始复制div（因为它们只有4个div保存到localStorage键），而不是重复2-5，#1或div1已被删除。

我意识到要阅读的内容很多，而且可能很难理解，所以我在其中编写了一个小提琴。

http://jsfiddle.net/charlescarver/bMzME/2/

为了测试我在说什么，你必须显示一些div，比如说“one”中的5。您会注意到#one1, #two1, and #three1都有边框，以显示删除它们时会发生什么。当您复制div时，div1将具有边框。如果删除该div，则在重新加载页面之前，页面上的其他div不会受到影响。重新加载后，您会注意到前一个div2已将其ID更改为div1，而不是将其保留在div2。

无论如何都要解决这个问题而不必重写整个脚本？我觉得可能有更快的方法来解决它，我只是无法想象它。

_{PS，如果您阅读了以上所有内容，我真的很感激}

Answer 1

我无法让你的代码工作，对不起。

但我确实设法大致实现了您的描述：http://jsfiddle.net/bMzME/11/

Answer 2

我相信其中一个问题是你只是计算＃one，＃two，＃three并使用它来动态创建div ID。

您需要的是一个包含所有i的数据结构，以便div{i}存在。可能会创建一个列表并将其映射到您的密钥，即＃one，＃two，＃three。然后你得到列表并迭代$(".base") for循环中的元素。

现在，如果您有5个div并且删除了第5个，那么您将拥有one1，one2，one3，one4。如果现在我插入另一个div 一个你想要5或6吗？如果您想要“5”，只需从列表中取出max()，否则请使用单独的计数器，如下所示 - 请参阅var：idx。然后将idx添加到列表中 - 我没有对列表进行编码。我会尝试我的解决方案，但需要一些时间 - 并非所有人都熟悉JS。但我相信这个想法应该有效。

$(".a").click(function() {
    var target = $(this).attr("href");
    var id = $(target).attr("id");
    var x = $("." + id).size();
    var click = $(target).data("clicked") || x;
    var idx = localStorage.getItem(target+"i");
    $(target).data("clicked", ++click);
    if (idx == null) {idx = 1;}
    var name = id + idx;
    alert(name);
    $(target).clone().attr("id", name).attr("class", "drag " + id).appendTo("body");
    localStorage.setItem(target, click);
    localStorage.setItem(target+"i", ++idx);
});

Javascript在使用localStorage重新加载时不保留div id？

2 个答案: