记录新项目的数量

发布于 2024-09-16 00:39:50 字数 2230 浏览 7 评论 0原文

这是我的场景，我有一个简化的嵌套可排序树，

  <!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 变量似乎很草率，但我也想在以后修改这个函数，这样我就可以用它来添加各种不同的项目，所以我使用 new+ x 或 old + x

原文

here is my scenario I have a nested sortable tree simplified looks like this

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

now where the fieldset has an additem class I want to add new items to the tree that will look like all the other items in the tree and I can do that no problem

all i do is add alittle jquery that adds a button and attach a click event to it.

and I have most of my code here

 $(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);
  }
 }

notice in the above code i call a variable X that needs to be a number so that the new Items can be unique so that is what I'm looking for how to keep track of all the new items I put in to my tree

any help would be appreciated

EDIT
I mentioned that I using an x variable seems sloppy but I would also like to mod this function down the road so that I can us it to add all kinds different items so I ues new+ x or old + x

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尝蛊 2024-09-23 00:39:50

关于全局变量的讨论。我现在发现我读错了你的代码，我的回答只是针对你的评论，所以它断章取义。

这就是我所说的，如果 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);
        }
    }
});

About the discussion of global variables. I see now that I read your code wrong and my answer was only directed at your comment, so it came out out of context.

This is what i meant by x not being global if it is defined inside 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>

The answer to your question

In your provided jQuery code, it's true that x would need to be global, since add_item is defined outside of document.ready. Here's one solution. Put the definition of X and add_item inside of document.ready. That way you don't need anything in the global scope (although since add_item takes an X parameter, it doesn't need to be in the same place as the declaration of 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);
        }
    }
});

回复收藏 0 原文

~没有更多了~