1

私は3つのリンクを作成しようとしています。これらのリンクをクリックすると、divが表示されます。これらのリンクをもう一度クリックすると、そのリンクの別のタイプが表示されます。たとえば、リンクがある場合、oneそれをクリックするとdivが生成されoneます。もう一度クリックすると、divが生成されone1ます。このように、各要素には一意のIDがあり、後で個々のdivにカスタムスタイルを適用できます。

ユーザーがaリンクの1つをクリックすると、そのタイプのdivがクリックされた回数のlocalStorageキーが作成されます。たとえば、divoneの行5時間をクリックすると、localStorageキーは5になります。次に、ページがリロードされると、スクリプトはdivをページに5回複製し、パート1から5のカウンターを設定します。リンクをもう一度クリックし始めると、aリンクは1からではなく、5から始まるため、競合するIDではありません。

私が遭遇している問題は、削除機能です。ユーザー5がdivを複製したとしますone。つまり、one1, one2, one3, one4, one5すべてが画面に表示されます。ユーザーがページをリロードしても、それらはすべてまだそこにあります。ただし、ユーザーがページから削除div1したとします。それに関連するすべてのスタイリングを削除div1し、他のdivをそのまま残します...

ただし、ページをリロードすると、スクリプトは、からの複製ではなく、から始まるdivを複製します1-4（localStorageキーに保存されたのは4 divのみであるため）、、、または、が削除されました。2-5#1div1

それは読むのがたくさんあり、理解するのが難しいかもしれないことを私は理解しているので、私はその中のコードをいじくりまわしました。

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

私が言っていることをテストするには、いくつかのdivを表示する必要があります。たとえば、「1つ」の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

問題の1つは、＃1、＃2、＃3のカウントを維持し、それを使用してdivIDを動的に作成していることだと思います。

必要なのは、存在するすべてのものを保持するデータ構造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 に答える