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 或旧的 + 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>

你的问题的答案

在您提供的 jQuery 代码中，确实 x 需要是全局的，因为add_item它是在document.ready. 这是一个解决方案。把 的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 回答