1

以下の appendBox 関数を使用すると、最初は正常に動作し、removeBox と同じように動作しますが、2 回目は正しく動作しません。コンテンツが複製されます。

なにが問題ですか？

function appendBox( id )
{
    $("#listContainer").append("<div id=\"appendbox-"+ id +"\"><a href=\"javascript:removeBox("+ id +");\">remove</a></div>");
    $("#addBox-"+ id ).slideUp();
}
function removeBox( id )
{
    $("#listMyBoxs").append("<div id=\"addBox-"+ id +"\"><a href=\"javascript:appendBox("+ id +");\">tilføj</a></div>");
    $("#appendbox-"+ id ).slideUp();
}

このテストを試すと、これが私のhtmlです

<div style="height: 200px; border: 1px solid black;">

    <div id="listContainer"></div>

    <div id="listMyBoxs">

        <div id="addBox-1">
            <a href="javascript:appendBox( 1 );">tilføj</a>
        </div>

    </div>

</div>
4

3 に答える 3

3

私はあなたのやり方を変えるでしょう。より典型的なソリューションは次のようになります。

<div id="outer">
  <div id="listContainer"></div>
  <div id="listMyBoxes">
    <a href="#">tilføj</a>
  </div>
</div>

と：

#outer { height: 200px; border: 1px solid black; }
#outer a { display: block; }

と

$(function() {
  $("#listContainer a").live("click", function() {
    $(this).slideUp(function() {
      $(this).appendTo("#listMyBoxes").text("remove").slideDown();
    });
    return false;
  });
  $("#listMyBoxes a").live("click", function() {
    $(this).slideUp(function() {
      $(this).appendTo("#listContainer").text("tilføj").slideDown();
    });
    return false;
  });
});

必要に応じて調整します。単純なリンクよりも複雑なコンテンツが必要な場合は、それを div で囲み、必要に応じて調整できます。原則はすべて同じです。

于 2009-09-21T09:08:56.807 に答える
2

既存の要素を移動したい場合は、次を試してください。

$("#appendbox-"+ id ).appendTo('#listMyBoxs');

新しい要素を使用$("<div></div>")または作成します。.append("<div></div>")

于 2009-09-21T08:50:22.930 に答える