変数を使用して ID を編集しようとすると、変数が変更されているにもかかわらず、変数に対して毎回同じ値を呼び出しています。
わかりました、コードをいじって、あるセクションから別のセクションにドラッグ アンド ドロップすると、元のコピーがドロップ セクション (クローン/追加) にドロップされます。クリックすると、フォームを含む div セクションが複製/追加されます。フォーム ID を静的文字列 + 変数に変更して、一意になるように変更したいと考えています。複製を行った後、次に別のコピーが作成されたときに新しいフォーム ID を取得できるように、変数をインクリメントする必要があります。
起こっているように見えるのは、コードが最初に実行されたときは問題なく動作し、変数を取得して静的文字列に追加しますが、新しいクローンのために2回目に呼び出されたとき、現在の値を取得する代わりにグローバル変数、前回と同じ値を使用します。したがって、最初の呼び出しは RSS0 になり、formID 変数が現在 1 であっても 2 番目の呼び出しは RSS0 になります。
クロムのインスペクト要素(スクリプトタブ、式の監視)ツールを使用して追跡したため、変数は適切に更新されており、クローンされている別のオブジェクトに対して別の呼び出しを行うと、グローバル変数の現在の値が取得されます-最初に呼び出し、その後同じことを行い、最初の呼び出し時の初期値に「スタック」します。
jQueryを使用してIDを変更するのではなく、直接javascriptを試してみました.1回目は正しく動作し、2回目は2番目のクローンが最初のクローンと同じIDを持ち、元を「適切に」変更します-私はこれに対して getElementById を実行し、最初の一致 (オリジナルはページの下部近くにリストされています) をプルアップして、ID を変更します。
さて、私がやろうとしていることと、実際に何が起こっているように見えるかを説明したので、コードを掲載させてください。各フォームが一意の ID を持つようにこれを修正する方法を誰かが教えてくれるかもしれません.. ..
var formID = 0; //used to make each form have its own unique ID
<!-- code section removed - above = global variable,
below is within some other stuff but working 'fine' -->
$(".draggable").click(function()
{
//first check if it doesn't already have #testContents, then check if it is in the copy area
if(!$(this).is(':has(.dragContents)') && $(this).parent().hasClass('copyArea'))
{
//if it doesn't already have this and is in the correct spot, append a new copy of the appropriate type
switch( $(this).html() ) //use the html contents of the item to determine which one to add
{
case "RSS":
$("#RSScontents").clone().appendTo(this);
//document.getElementById("RSS").id = "RSS"+formID;
$(this).find("#RSS").attr("id","RSS"+formID);
formID++;
break;
case "Advertisement":
$("#drag2contents").clone().appendTo(this);
$(this).find("#advert").attr("id","advert"+formID);
formID++;
break;
そして、クローンされた div タグを変更して、私が作業しているフォームを確認できるようにします。
<div id="RSScontents" class="dragContents" style="width:380px; padding-left:2px; margin:5px;">
This is the RSS information section
<form id="RSS" method="post">
RSS Feed URL: <input type="text" name="rssFeedURL" size=35 /><br />
RSS Feed Title: <input type="text" name="rssFeedTitle" size=35 /><br />
<input type=button name="rsssave" value="Save"><input type=button name="rssdelete" class="delete" value="Delete">
</form>