2

これが私のシナリオです。ネストされたソート可能なツリーは、次のように簡略化されています

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>
   <head>
    <title></title>
   </head>
   <body>
    <ul>
     <li id="item_123" name="123">
      <fieldset class="additem">
       <input type="text" name="title" value="">
      </fieldset>
      <ul>
       <li id="item_253" name="253">
        <fieldset class="remove additem">
          <input type="text" name="title" value="">
        </fieldset>
       </li>
       <li id="item_252" name="252">
        <fieldset class="remove additem">
          <input type="text" name="title" value="">
        </fieldset>
       </li>
       <li id="item_250" name="250">
        <fieldset class="remove additem">
          <input type="text" name="title" value="">
        </fieldset>
       </li>
       <li id="item_247" name="247">
        <fieldset class="remove additem">
          <input type="text" name="title" value="">
        </fieldset>
       </li>
      </ul>
     </li>
    </ul>
   </body>
  </html>

フィールドセットに additem クラスがある場合、ツリー内の他のすべてのアイテムのように見える新しいアイテムをツリーに追加したいのですが、問題なく実行できます

私がすることは、ボタンを追加してクリックイベントをそれに添付する小さなjqueryを追加することだけです。

ここにほとんどのコードがあります

 $(document).ready(function(){
  $('<p class="add">Add <img src="/add.png" alt="up.png" /></p>').click(function() {
   add_item(this);
  }).prependTo("fieldset.additem");
 }

 function add_item(btn){
  var li ='
   <li id="item_new'+ X+'" name="new"'+ X+'>'+
    '<fieldset class="remove additem">'+
      '<input type="text" name="title" value="">'+
    '</fieldset>'+
   '</li>';

  if(!$(btn).parent().next('ul').length) {
   $(btn).parents("li:first").append("<ul>"+li+"</ul>");
  }else {
   $(btn).parent().next("ul").prepend(li);
  }
 }

上記のコードで、変数 X を呼び出すことに注意してください。変数 X は数値である必要があるため、新しいアイテムを一意にすることができます。これが、ツリーに追加したすべての新しいアイテムを追跡する方法を探しているものです。

任意の助けをいただければ幸いです

編集 x 変数を使用するのは雑に見えると言いましたが、この関数を将来的に変更して、すべての種類の異なるアイテムを追加できるようにしたいので、 new+ x または old + x を使用します

4

1 に答える 1

0

グローバル変数の議論について。私はあなたのコードを間違って読んだことがわかりました、そして私の答えはあなたのコメントに向けられただけだったので、それは文脈から外れました。

これは、x内部で定義されている場合、グローバルではないという意味document.readyです。

<script type="text/javascript">

var global = "this is global";

$(document).ready( function() {
    var notGlobal = "this is confined to the callback function of document.ready()";
    alert(global + "\n" + notGlobal)
});

//Now we're back to the global scope. "notGlobal" is not reachable from here
//This will give an error, as "notGlobal" isn't defined in this scope
alert(global + "\n" + notGlobal);

</script>

あなたの質問への答え

add_item提供されたjQueryコードでは、xは。の外部で定義されているため、グローバルである必要があるのは事実ですdocument.ready。これが1つの解決策です。の定義Xとそのadd_item中に入れてくださいdocument.ready。そうすれば、グローバルスコープに何も必要ありません（ただしadd_item、Xパラメーターを受け取るため、の宣言と同じ場所にある必要はありませんX）

$(document).ready(function(){
    var X = 0;

    $('<p class="add">Add <img src="/add.png" alt="up.png" /></p>')
    .click(function() {
        add_item(this,X);
        X++
    })
    .prependTo("fieldset.additem");

    function add_item(btn,X){
        var li = ''+
        '<li id="item_new'+ X+'" name="new'+ X+'">'+
            '<fieldset class="remove additem">'+
                '<input type="text" name="title" value="">'+
            '</fieldset>'+
        '</li>';

        if(!$(btn).parent().next('ul').length) {
            $(btn).parents("li:first").append("<ul>"+li+"</ul>");
        }else {
            $(btn).parent().next("ul").prepend(li);
        }
    }
});
于 2010-08-25T19:31:41.273 に答える