2010-08-23 16 views
2

voici mon scénario que j'ai emboîtés arbre triables regards simplifié comme celui-cien comptant le nombre de nouveaux éléments

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

maintenant où le fieldset a une classe additem Je veux ajouter de nouveaux éléments à l'arbre qui ressemblera tous les autres éléments dans l'arbre et je peux le faire sans problème

tout ce que je fais est d'ajouter un peu de jquery qui ajoute un bouton et y attacher un événement de clic.

et j'ai la plupart de mon code ici

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

avis dans le code ci-dessus j'appelle une variable X qui doit être un nombre afin que les nouveaux éléments peuvent être unique pour c'est-ce que je suis la recherche de la façon de garder une trace de tous les nouveaux articles mis à mon arbre

toute aide serait appréciée

EDIT je l'ai mentionné que je l'aide d'une variable x semble bâclée mais je aime aussi modiser cette fonction sur la route afin que je puisse nous d'ajouter toutes sortes d'objets différents donc je ues nouveau + x ou ancien + x

+0

comme remarque que je pourrais définir une variable globale de x = 0 dans document prêt mais qui semble juste paresseux et faux – mcgrailm

+0

Rien de mal à utiliser une variable X dans la fonction document.ready. Il est limité à cette fonction de rappel particulière et donc pas global (ne peut pas être atteint en dehors de la fonction) –

+0

Comment cela ne serait-il pas global? si je définis x dans le document prêt, il sera vu par toutes mes fonctions – mcgrailm

Répondre

0

À propos de la discussion des variables globales. Je vois maintenant que j'ai mal lu votre code et ma réponse était seulement dirigée vers votre commentaire, donc il est sorti hors contexte.

C'est ce que je voulais dire par x ne pas être globale si elle est définie à l'intérieur 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> 

La réponse à votre question

Dans votre fourni le code jQuery, il est vrai que x serait doit être global, car add_item est défini en dehors de document.ready. Voici une solution. Mettez la définition de X et add_item à l'intérieur de document.ready. De cette façon, vous ne avez pas besoin quoi que ce soit dans la portée globale (bien que depuis add_item prend un paramètre X, il n'a pas besoin d'être au même endroit que la déclaration de 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); 
     } 
    } 
});