1

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

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

我遇到的问题是删除功能。假设用户重复5div one。这意味着它们one1, one2, one3, one4, one5都出现在屏幕上。如果用户重新加载页面，它们都还在那里。假设用户div1从页面中删除。它删除div1了所有与之相关的样式，并保留了其他 div 的机智......

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

我意识到要阅读的内容很多，而且可能很难理解，因此我对其中的代码进行了修改。

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

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

有没有办法解决这个问题而不必重写整个脚本？我觉得可能有更快的方法来修复它，但我无法想象。

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

4

2 回答 2

2

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

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

于 2012-09-15T16:41:54.153 回答
1

我相信其中一个问题是您只是在计算#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);
});
于 2012-09-15T18:13:38.110 回答