ведение счета новых предметов - PullRequest
Новая
       9

ведение счета новых предметов

2 голосов
/ 24 августа 2010

вот мой сценарий У меня есть вложенное сортируемое дерево, упрощенно выглядит вот так 

  <!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, я хочу добавить новые элементы в дерево, которые будут выглядеть как все другие элементы в дереве, и я могу это сделать без проблем

Все, что я делаю, это добавляю немного 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, которая должна быть числом, чтобы новые элементы могли быть уникальными, поэтому я ищу, как отслеживать все новые элементы, которые я вставляю в свой дерево

любая помощь будет оценена

EDIT Я упоминал, что использование переменной x кажется небрежным, но я также хотел бы изменить эту функцию в будущем, чтобы я мог использовать ее для добавления различных элементов, чтобы использовать новые + x или старые + x

1 Ответ

0 голосов
/ 25 августа 2010

Об обсуждении глобальных переменных. Теперь я вижу, что я неправильно прочитал ваш код, и мой ответ был направлен только на ваш комментарий, поэтому он вышел из контекста.

Это то, что я имел в виду, когда 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);
        }
    }
});
...