Question

这是我的场景我有一个嵌套的可排序树简化看起来像这样

  <!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>

现在fieldset有一个additem类，我想在树中添加新项目，看起来像树中的所有其他项目，我可以做到没问题

我所做的就是添加alittle jquery，添加一个按钮并附加一个click事件。

我的大部分代码都在这里

 $(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变量似乎很邋but但我也想在路上修改这个功能，这样我就可以添加各种不同的项目了，所以我使用新的+ x或者旧的+ x

Answer 1

关于全局变量的讨论。我现在看到我的代码读错了，我的回答仅针对你的评论，所以它是脱离背景的。

如果在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是在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); } } });的声明位于同一位置

{{1}}

保持新项目的数量

1 个答案: