0

更新: JsFiddle のリンクは次のとおりです: http://jsfiddle.net/zAVFv/

JsFiddle では動作していないようですが、コード全体 (html、css、および Js) を表示するのに役立つと思います。

Javascript を使用した DOM 編集で非常に奇妙な状況に直面しています。私のサンプルコードは以下です。基本的に、swapCells は、それぞれ 2 つの子を持つ 2 つのオブジェクトを受け取ります。1 つは img 要素で、もう 1 つは textNode です。私が見たいのは、 removeChild がどのように機能するかです。

すべての混乱の原因となっている 2 行をマークしました。issue#1 は sourceTD がその子を削除した行にあり、issue#2 は lastChild が destinationTD から削除されたときです。

以下のコードがどのように実行されているかを説明しましょう: a) コードに発行行 #1 のみが存在する場合、sourceTD の子が削除され、出力には source に img タイプの子が 1 つあると表示されます。宛先には 2 つの子があります - img と text ---- 期待どおりに動作します b) 発行行 #2 のみがコードに存在する場合、destinationTD の子は削除され、上記と同様に期待どおりに動作します c) 問題が発生した場合両方の行がコードに存在し、sourceTD lastChild のみが削除されます。出力は、アラートの sourceTD 部分についてのみ受信されます。destinationTD アラートが来ていないため、宛先の子が削除されたかどうかを評価できません

コード：

function swapCells(sourceTD, destinationTD){

//line below is issue line#1 
sourceTD.removeChild(sourceTD.lastChild);  

//line below is issue line#2
destinationTD.removeChild(destinationTD.lastChild);

    if(sourceTD.hasChildNodes()){
        alert("Source has: " + sourceTD.childNodes.length);
        alert(sourceTD.childNodes[0].alt); 
        alert(sourceTD.childNodes[1].nodeName); 
    }
destinationTD.removeChild(destinationTD.lastChild);
    if(destinationTD.hasChildNodes()){
        alert("Destination has: " + destinationTD.childNodes.length);
        alert(destinationTD.childNodes[0].alt); 
        alert(destinationTD.childNodes[1].nodeName); 
    }
}

両方の問題行が存在するときにコードが異常に動作する理由を教えてください。また、関数が単一のノードのみを削除できる、または単一のremoveChildのみが機能するようなものはありますか...????? 私は混乱しています。

ありがとう！

4

3 に答える 3

1

ソート済み -> http://jsfiddle.net/zAVFv/3/

TD の最初の childNode は、img 要素ではなく改行です .... 数字を 1 ずつインクリメントし、正常に動作しています ... 製品環境で使用するには少し薄っぺらなようです - HTML を制御できない限り - おそらく使用を検討してくださいgetelementbytagname('img')代わりは ？

于 2011-10-11T13:28:35.407 に答える
0

そこに両方の​​回線がある場合、destinationTD.removeChild(destinationTD.lastChild);2 回呼び出すことになるため、両方の子が削除されます。if ステートメントdestinationTDは、子ノードがないため false と評価されるため、何も出力されません。この場合、出力がないことは、コードが機能していないという証拠ではなく、コードが機能しているという証拠です。

于 2011-10-11T13:02:56.787 に答える
0

ああ……わかった。

この問題は、削除後に存在しなくなった子ノードを参照するために作成されたエラーが原因でした。

たとえば、sourceTD に 3 つの子があり、childNodes[1] および childNodes[2] として参照されている場合、sourceTD の lastChild を削除すると、2 つしか残っていないため、childNodes[2] はなくなります。 3番目のノードはもうありません。JS でのこのエラーの結果、残りのコードは何らかの理由で抑制され、実行されません。これが、destinationTD アラートも抑制されている理由です。

愚かな参照..!

みんな、特に @ManseUK の助けに感謝します

于 2011-10-11T13:47:56.720 に答える