Pagina 3 di 4 primaprima 1 2 3 4 ultimoultimo
Visualizzazione dei risultati da 21 a 30 su 32

Discussione: Creazione ciclo jquery

  1. #21
    Se usassi il ciclo for in javascript dandogli il range di valori sarebbe più veloce del ciclo each di jquery?

  2. #22
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Mi viene difficile risponderti perché non ho capito bene come deve comportarsi il tutto. Sul primo post hai accennato alla "logica condizionale che fa comparire i menu" ma sinceramente non ho capito come viene gestita la cosa. Cioè, cosa va a restituirti il PHP? cosa ci sta nel csv menzionato sul primo post? Come gli dici di inserire o no i prossimi select in base alle scelte che vengono man mano effettuate?

    Mi viene da pensare che tutta la struttura degli elementi select, oltre alla loro gestione, possa essere elaborata via jQuery, andando anche a creare al volo gli elementi stessi che servono man mano che si effettuano le scelte; ma, ripeto, mi sfuggono i concetti iniziali del funzionamento che dovrebbe avere questa applicazione.

    Trovo molto macchinoso il sistema di id che stai usando. Ti direi che potresti risolvere anche senza usare alcun id, sempre gestendo la cosa via jQuery con dei riferimenti relativi dei vari elementi.

    Puoi chiarirmi questi punti, magari partendo da un esempio semplice ma che sia completo di tutte le componenti in gioco?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #23
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Cioè, cosa va a restituirti il PHP? cosa ci sta nel csv menzionato sul primo post? Come gli dici di inserire o no i prossimi select in base alle scelte che vengono man mano effettuate?

    Trovo molto macchinoso il sistema di id che stai usando. Ti direi che potresti risolvere anche senza usare alcun id, sempre gestendo la cosa via jQuery con dei riferimenti relativi dei vari elementi.

    Puoi chiarirmi questi punti, magari partendo da un esempio semplice ma che sia completo di tutte le componenti in gioco?


    In sostanza sto creando un esercizi di analisi grammaticale da fare online con correzione automatica. Il PHP mi stampa a schermo tutto l'html della pagina, prendento le frasi e le singole parole da analizzare dalle righe del file csv: ciascuna riga di file csv stampa a schermo il container con la frase e una riga per ciascuna parola da analizzare; inoltre, la stessa riga contiene anche tutti i valori dei select che, al clic del tasto "correggi", restituiscono una risposta all'utente tramite un file javascript che analizza le singole scelte dell'utente (anche questo javascript è scritto dal PHP).
    Jquery mi serve per la scoparsa e comparsa dei select per l'analisi della singola parola: ad esempio, se si sceglie come prima opzione "articolo", visualizzo altri tre select da completare, se si sceglie "aggettivo" saranno altri quattro e così via.
    Non so se ho reso l'idea.

    Ad ogni modo, sto scrivendo uno script che fa a meno delle id e utilizza sostanzialmente soltanto il selettore (this). Pare che proceda bene. Di certo è molto interessante.
    Vediamo se sarà più rapido dell'altro.
    Ultima modifica di Hans Castorp; 18-02-2018 a 16:57

  4. #24
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ok, l'idea più o meno l'avevo capita ma mi sfuggono alcuni punti del procedimento che stai usando per arrivare a quel risultato.

    Jquery mi serve per la scoparsa e comparsa dei select per l'analisi della singola parola: ad esempio, se si sceglie come prima opzione "articolo", visualizzo altri tre select da completare, se si sceglie "aggettivo" saranno altri quattro e così via.
    Ho dato uno sguardo più approfondito a come vai a popolare i select. Ho visto che al change vai a fare tutti i controlli per creare le nuove option e svuotare gli altri select nascosti.

    Questo è uno stralcio dello script che stai usando (l'ho troncato perché è veramente troppo lungo anche per inserirlo nel post):
    codice:
    $(".riga").each(function(i)
    {
    
    
    $("#riga-1-" + i + " select:nth-of-type(1)").change(function()
        {
        if ($(this)[0].selectedIndex == 1) // ARTICOLO
            {
            $("#1-" + i + "-2").show(500).html($tutto);
            $(".riga select:nth-of-type(2) option:not(.primaopzione, .articolo)").css("display","none");
            $("#1-" + i + "-3").show(500).html($tutto);
            $(".riga select:nth-of-type(3) option:not(.primaopzione, .mf)").css("display","none");
            $("#1-" + i + "-4").show(500).html($tutto);
            $(".riga select:nth-of-type(4) option:not(.primaopzione, .sp)").css("display","none");
            $("#1-" + i + "-5").hide(500).html($vuoto);
            $("#1-" + i + "-6").hide(500).html($vuoto);
            $("#1-" + i + "-7").hide(500).html($vuoto);
            $("#1-" + i + "-8").hide(500).html($vuoto);
            $("#1-" + i + "-9").hide(500).html($vuoto);
            $("#1-" + i + "-10").hide(500).html($vuoto);
            }
        if ($(this)[0].selectedIndex == 2) // NOME
            {
            $("#1-" + i + "-2").show(500).html($tutto);
            $(".riga select:nth-of-type(2) option:not(.primaopzione, .comune)").css("display","none");
            $("#1-" + i + "-3").show(500).html($tutto);
            $(".riga select:nth-of-type(3) option:not(.primaopzione, .persona)").css("display","none");
            $("#1-" + i + "-4").show(500).html($tutto);
            $(".riga select:nth-of-type(4) option:not(.primaopzione, .concreto)").css("display","none");
            $("#1-" + i + "-5").show(500).html($tutto);
            $(".riga select:nth-of-type(5) option:not(.primaopzione, .individuale)").css("display","none");
            $("#1-" + i + "-6").show(500).html($tutto);
            $(".riga select:nth-of-type(6) option:not(.primaopzione, .mf)").css("display","none");
            $("#1-" + i + "-7").show(500).html($tutto);
            $(".riga select:nth-of-type(7) option:not(.primaopzione, .generenome)").css("display","none");
            $("#1-" + i + "-8").show(500).html($tutto);
            $(".riga select:nth-of-type(8) option:not(.primaopzione, .sp)").css("display","none");
            $("#1-" + i + "-9").show(500).html($tutto);
            $(".riga select:nth-of-type(9) option:not(.primaopzione, .numeronome)").css("display","none");
            $("#1-" + i + "-10").show(500).html($tutto);
            $(".riga select:nth-of-type(10) option:not(.primaopzione, .struttura)").css("display","none");
            }
    
        if ($(this)[0].selectedIndex == 3) // SELEZIONA AGGETTIVO DAL PRIMO MENU
            {
            $("#1-" + i + "-2").show(500).html($tutto);
            $(".riga select:nth-of-type(2) option:not(.primaopzione, .tipoaggettivo)").css("display","none");
            $("#1-" + i + "-3").hide(500).html($vuoto);
            $("#1-" + i + "-4").hide(500).html($vuoto);
            $("#1-" + i + "-5").hide(500).html($vuoto);
            $("#1-" + i + "-6").hide(500).html($vuoto);
            $("#1-" + i + "-7").hide(500).html($vuoto);
            $("#1-" + i + "-8").hide(500).html($vuoto);
            $("#1-" + i + "-9").hide(500).html($vuoto);
            $("#1-" + i + "-10").hide(500).html($vuoto);
    
            $("select").each(function(i)
                {
                $("#1-" + i + "-2").change(function()
                    {
                    if ($(this)[0].selectedIndex == 34) //SELEZIONA QUALIFICATIVO
                        {
                        $("#1-" + i + "-3").show(500).html($tutto);
                        $(".riga select:nth-of-type(3) option:not(.gradoaggettivo)").css("display","none");
                        $("#1-" + i + "-4").hide(500).html($vuoto);
                        $("#1-" + i + "-5").hide(500).html($vuoto);
                        $("#1-" + i + "-6").hide(500).html($vuoto);
                        $("#1-" + i + "-7").hide(500).html($vuoto);
                        $("#1-" + i + "-8").hide(500).html($vuoto);
                        $("#1-" + i + "-9").hide(500).html($vuoto);
                        $("#1-" + i + "-10").hide(500).html($vuoto);
                        $("select").each(function(i)
                            {
                            $("#1-" + i + "-3").change(function()
                                {
    
                                if ($(this)[0].selectedIndex == 37) // SELEZIONA GRADO POSITIVO
                                    {
                                    $("#1-" + i + "-4").show(500).html($tutto);
                                    $(".riga select:nth-of-type(4) option:not(.primaopzione, .mf)").css("display","none");
                                    $("#1-" + i + "-5").show(500).html($tutto);
                                    $(".riga select:nth-of-type(5) option:not(.primaopzione, .sp)").css("display","none");
                                    $("#1-" + i + "-6").hide(500).html($vuoto);
                                    $("#1-" + i + "-7").hide(500).html($vuoto);
                                    $("#1-" + i + "-8").hide(500).html($vuoto);
                                    $("#1-" + i + "-9").hide(500).html($vuoto);
                                    $("#1-" + i + "-10").hide(500).html($vuoto);
                                    }
                                if ($(this)[0].selectedIndex == 38) // SELEZIONA GRA COMPARATIVO
                                    {
                                    $("#1-" + i + "-4").show(500).html($tutto);
                                     $(".riga select:nth-of-type(4) option:not(.primaopzione,  .gradocomparativo)").css("display","none");
                                    $("#1-" + i + "-5").show(500).html($tutto);
                                    $(".riga select:nth-of-type(5) option:not(.primaopzione, .mf)").css("display","none");
                                    $("#1-" + i + "-6").show(500).html($tutto);
                                    $(".riga select:nth-of-type(6) option:not(.primaopzione, .sp)").css("display","none");
                                    $("#1-" + i + "-7").hide(500).html($vuoto);
                                    $("#1-" + i + "-8").hide(500).html($vuoto);
                                    $("#1-" + i + "-9").hide(500).html($vuoto);
                                    $("#1-" + i + "-10").hide(500).html($vuoto);
                                    }
                                if ($(this)[0].selectedIndex == 39) // SELEZIONA GRADO SUPERLATIVO
                                    {
                                    $("#1-" + i + "-4").show(500).html($tutto);
                                     $(".riga select:nth-of-type(4) option:not(.primaopzione,  .gradosuperlativo)").css("display","none");
                                    $("#1-" + i + "-5").show(500).html($tutto);
                                    $(".riga select:nth-of-type(5) option:not(.primaopzione, .mf)").css("display","none");
                                    $("#1-" + i + "-6").show(500).html($tutto);
                                    $(".riga select:nth-of-type(6) option:not(.primaopzione, .sp)").css("display","none");
                                    $("#1-" + i + "-7").hide(500).html($vuoto);
                                    $("#1-" + i + "-8").hide(500).html($vuoto);
                                    $("#1-" + i + "-9").hide(500).html($vuoto);
                                    $("#1-" + i + "-10").hide(500).html($vuoto);
                                    }
                                });
                            });
                        }
    
                    if ($(this)[0].selectedIndex == 35) //SELEZIONA DETERMINATIVO
                        {
                        $("#1-" + i + "-3").show(500).html($tutto);
                        $(".riga select:nth-of-type(3) option:not(.primaopzione, .aggettivodeterminativo)").css("display","none");
                        $("#1-" + i + "-4").show(500).html($tutto);
                        $(".riga select:nth-of-type(4) option:not(.primaopzione, .mf)").css("display","none");
                        $("#1-" + i + "-5").show(500).html($tutto);
                        $(".riga select:nth-of-type(5) option:not(.primaopzione, .sp)").css("display","none");
                        $("#1-" + i + "-6").hide(500).html($vuoto);
                        $("#1-" + i + "-7").hide(500).html($vuoto);
                        $("#1-" + i + "-8").hide(500).html($vuoto);
                        $("#1-" + i + "-9").hide(500).html($vuoto);
                        $("#1-" + i + "-10").hide(500).html($vuoto);
                        }
                    });
                });
            }
    
    
    
    [...]
    Ti dico subito che l'approccio che stai usando mi pare alquanto statico. Stai usando 400 e passa righe di script per creare qualche option. Il tutto, usando un sistema più dinamico, potrebbe essere ridotto a una qualche decina di righe.

    Ti servirà partire da uno schema (che potrebbe essere un xml o un json o qualcosa del genere) dove saranno riportati in una struttura gerarchica tutti i valori possibili delle option.
    Hai già qualcosa del genere?

    A quel punto, a mio parere, la costruzione delle varie option, nonché degli interi select, può essere elaborata dinamicamente via JavaScript/jQuery in base alle scelte effettuate man mano.

    Se hai interesse posso provare ad elaborare qualcosa ma sarebbe meglio partire appunto da uno schema più o meno realistico dei valori per le option. Puoi fornirlo?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #25
    Sì, posso fornirlo, grazie per la gentilezza.
    Prima però vedo se riesco a risolvere la questione senza cicli e id, soltanto utilizzando i selettori di jquery.
    Pare che funzi. Mo vediamo.
    Ti so dire appena possibile.

  6. #26
    Finito, perfetto direi. Adesso i select scorrono che è un piacere.
    Direi che è più che sufficiente. Sono riuscito a risolvere senza utilizzare le id come consigliavate voi, e lavorando soltanto con i selettori "this" ":nth" per i select.
    Grazie mille per l'aiuto.

  7. #27
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Bene, è già un passo in avanti. Ti direi comunque che volendo può essere ottimizzato parecchio di più; continuo a trovare lo script molto ridondante secondo le potenzialità di jQuery che, a mio modesto parere, non stai sfruttando al meglio, anche se hai usato questi ultimi accorgimenti.

    Sia chiaro, non voglio assolutamente scoraggiarti, è già molto che tu sia riuscito, da te, ad arrivare a questo punto (valutando la differenza dello script da cui sei partito); se ritieni sia sufficiente, bene per te ma, se eventualmente gradisci un ulteriore parere, (a parte lo script che continuo a trovarlo ridondante anche dopo le modifiche) posso dirti che il metodo stesso che stai usando (che poi ho notato solo dopo, spulciando meglio la tua pagina) è comunque farraginoso. In breve stai costruendo, per ogni select che viene mostrata, tutta la serie completa di option anche se sostanzialmente non ti serviranno, infatti vai a nasconderle tutte tranne quelle poche che devono restare visibili a seconda delle relative selezioni a cascata. Capisci che stai creando comunque una valanga di codice html che viene applicato sulla pagina (anche se la maggior parte di quegli elementi resta nascosta)?
    Sicuramente c'è uno spreco di risorse, sia nel creare tali elementi, che restano comunque inutilizzati, sia per mantenerli sulla pagina.

    Un procedimento più ottimale può essere quello di creare al volo solo gli elementi di cui hai bisogno; e questo, come ti dicevo, può essere realizzato in modo anche più dinamico se si crea uno schema di riferimento dei valori da applicare alle option secondo la concatenazione prestabilita, così che con JavaScript/jQuery si possa "leggere", ad ogni scelta effettuata, esattamente ciò che deve essere creato.

    Non insisto maggiormente ma se ti interessa posso giusto provare (tempo permettendo) ad elaborare una possibile soluzione in base a questo che ti ho indicato.

    Nel caso fammi sapere, buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #28
    Ciao KillerWorm, il tuo ultimo post mi fa riflettere sul motivo per cui ho deciso, all'apertura di ogni select, di caricare una variabile che contiene tutte le opzioni: il motivo è che, se caricassi soltanto delle classi di opzioni, l'onchange, basandosi sull'indice che compare di volta in volta, mi darebbe problemi nella concatenazione delle condizioni di comparsa.
    Quindi, adesso che mi ci fai pensare, dovrei vincolare l'onchange non al selected-index, ma al value assegnato a ciascuna opzione cliccata delle liste: in questo modo, anziché caricare tutte le opzioni e nascondere le classi che non mi interessano, posso caricare soltanto la classe desiderata e non avrei problemi.
    Inoltre, cosa per nulla secondaria, non avrò problemi di css con Safari, che non applica correttamente il display:none alle opzioni.

    Prima di mandarti la lista di option, provo a fare questa modifica allo script, così vediamo come va.
    Grazie!
    Ultima modifica di Hans Castorp; 19-02-2018 a 13:44

  9. #29
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, non so se hai proseguito con l'ottimizzazione del tuo progetto, io nel mentre ho provato ad elaborare qualcosa in base ai miei precedenti suggerimenti. Sono riuscito a sviluppare un sistema ottimizzato usando appunto uno schema di riferimento per creare dinamicamente la catena di select secondo le scelte che si andranno ad effettuare man mano.

    Posto un esempio dimostrativo dell'elaborato e di seguito espongo i punti principali del procedimento che ho adoperato (la questione e lunga quindi dovrò frammentare su più post). Premetto comunque che l'ho fatto per mio personale diletto e come esercizio per tenere in allenamento il cervello, di certo avrei piacere se fosse utile a te o a qualcun altro ma ovviamente sentiti libero di farne a meno oppure di usufruirne come meglio credi

    Qui l'esempio completo e funzionante:
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>Esempio chainedSelect</title>
          <meta charset="utf-8">
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <style>
             * {
                box-sizing: border-box;
             }
             .wrapperesercizio {
                border: 3px solid lightgrey;
                border-radius: 10px;
                display: inline-block;
                padding: 5px 10px 5px 10px;
                background-color: #f5f5f5;
                margin-bottom: -10px;
             }
             .primocampo {
                width: 134px !important;
                font-size: 20px;
                font-family: arial;
                display: inline-block;
                word-wrap: break-word;
                text-align: center !important;
                text-transform: uppercase;
             }
             .riga {
                margin-bottom: 10px;
                border-bottom: solid 2px lightgrey;
                padding-bottom: 10px;
                overflow: hidden;
             }
             .riga select {
                font-size: 11px !important;
                width: 130px !important;
                border: solid lightgrey 2px;
                padding: 2px;
                text-transform: uppercase;
                margin: 0px 5px 5px 0px;
                border-radius: 5px;
                font-weight: 900;
                color: #aaa9a9;
             }
             
             .riga option {
                color: #aaa9a9;
             }
             
             /* Prima option usata come etichetta */
             .riga select:invalid,
             .riga select option[value=""] {
                color: Coral;
                box-shadow: none;
                text-transform: lowercase;
                text-align: center;
             }
          </style>
       </head>
       <body>
          <div class="wrapperesercizio">
             <div class="riga"><span class="primocampo">Il</span></div>
             <div class="riga"><span class="primocampo">gatto</span></div>
             <div class="riga"><span class="primocampo">dorme</span></div>
          </div>
          
          <script>
             // Schema json "Analisi grammaticale"
              var schema =  {"schema":[{"categoria":0,"articolo":[{"tipo":0,"determinativo":0,"indeterminativo":0,"partitivo":0},"_genere","_numero"],"nome":[{"modo":0,"comune":0,"proprio":0},{"riferimento":0,"di  persona":0,"di animale":0,"di  cosa":0},{"cognizione":0,"concreto":0,"astratto":0},{"entità":0,"individuale":0,"collettivo":0},"_genere",{"aspetto":0,"mobile":0,"genere   comune":0,"indipendente":0,"promiscuo":0},"_numero",{"struttura":0,"variabile":0,"invariabile":0,"difettivo":0,"sovrabbondante":0},{"forma":0,"primitivo":0,"derivato":0,"composto":0,"alterato":0}],"aggettivo":[{"classe":0,"qualificativo":[{"grado":0,"positivo":["_genere","_numero"],"comparativo":[{"paragone":0,"di  maggioranza":0,"di minoranza":0,"di  uguaglianza":0},"_genere","_numero"],"superlativo":[{"tipo":0,"relativo":0,"assoluto":0},"_genere","_numero"]}],"determinativo":[{"specificazione":0,"possessivo":0,"dimostrativo":0,"indefinito":0,"interrogativo":0,"esclamativo":0,"numerale":0},"_genere","_numero"]}],"pronome":[{"tipo":0,"personale":[{"funzione":0,"soggetto":0,"complemento":0},{"persona":0,"1ª  pers.":0,"2ª pers.":0,"3ª  pers.":0},"_numero"],"relativo":["_genere","_numero"],"possessivo":["_genere","_numero"],"dimostrativo":["_genere","_numero"],"indefinito":["_genere","_numero"],"interrogativo":["_genere","_numero"],"esclamativo":["_genere","_numero"],"numerale":["_genere","_numero"]}],"verbo":[{"coniugazione":0,"1ª  coniugazione":0,"2ª coniugazione":0,"3ª coniugazione":0,"con.  propria":0},{"modo":0,"indicativo":0,"congiuntivo":0,"condizionale":0,"imperativo":0,"infinito":0,"participio":0,"gerundio":0}],"avverbio":[{"forma":0,"primitivo":0,"derivato":0,"composto":0,"locuzione":0},{"specie":0,"di   modo":[{"grado":0,"positivo":0,"comparativo":0,"superlativo":0},{"alterazione":0,"diminutivo":0,"vezzeggiativo":0,"accrescitivo":0,"dispregiativo":0}],"di  tempo":0,"di luogo":0,"di  quantità":0,"valutativi":0,"interrogativi":0,"esclamativi":0,"presentativi":0}],"preposizione":[{"tipo":0,"propria":[{"forma":0,"semplice":0,"articolata":0}],"impropria":0,"locuzione":0}],"esclamazione":[{"tipo":0,"propria":0,"impropria":0,"locuzione":0}],"congiunzione":[{"forma":0,"semplice":0,"composta":0,"locuzione":0},{"funzione":0,"coordinante":0,"subordinante":0}]}],"_genere":{"genere":0,"maschile":0,"femminile":0},"_numero":{"numero":0,"singolare":0,"plurale":0}};
             
             $.fn.chainedSelect = function(json){
             // Crea una catena di elementi select che vengono generati secondo lo schema json specificato
             
                var arr = this.get();
                
                return this.each(function(){
                   
                   // Classe applicata al contenitore degli elementi select di ciascuna riga
                   var wrapClass = 'wrapper-chained-select';
                   // Contenitore degli elementi select
                    var $wrap = $('.'+wrapClass, this).length ? $('.'+wrapClass, this) :  $('<span class="'+wrapClass+'">').appendTo(this);
                   
                   // Gestione preliminare degli errori
                    if ($('select', $wrap).length)      { err(this, 'Inizializzazione non  riuscita. Elementi <select> già esistenti'); return; }
                    if (!json.hasOwnProperty('schema')) { err(arr, 'Non trovo la proprietà  "schema" sull\'oggetto JSON'); return false; }
                   if  (!json.schema.length)            { err(arr, 'La proprietà "schema"  sull\'oggetto JSON deve essere un array non vuoto'); return false; }
                   
                   // Creo il primo segmento della catena
                   createChain(json.schema, $wrap);
                });
                
                function createChain(jsonNode, $wrap){
                // Crea un segmento della catena di select, cioè uno o più select in base al nodo specificato dello schema json
                // Restituisce un array degli elementi select creati
                
                   var id
                     , $select
                     , node
                     , opt
                     , firstOpt
                     , arrSelects = []
                   ;
                   
                   for (id in jsonNode){
                      
                      node = jsonNode[id]
                      
                      $select = $('<select required>').appendTo($wrap);
                      arrSelects.push($select.get(0));
                      firstOpt = true;
                      
                      if (typeof node == "string") {
                          if (!json.hasOwnProperty(node)) { err($select.get(0), 'Non trovo la  proprietà "'+node+'" sull\'oggetto JSON'); node = {'err!':0}; } 
                         else {node = json[node]}
                      }
                      
                      for (opt in node){
                         $select
                            .append($('<option'+(firstOpt ? ' value="" class="caption" selected' : ' value="'+opt+'"')+'>')
                            .text(firstOpt ? '— '+opt+' —' : opt));
                            
                         firstOpt = false;
                      }
                      
                      $select.change(function(){
                      // Al change aggiorna il segmento della catena che segue questo select
                         
                         // Rimuovo tutti gli elementi generati da questo select in poi
                         breakChain(this);
                         
                         // Creo i nuovi elementi e li memorizzo per questo select
                         $(this).data('children',createChain(node[this.value], $wrap));
                      
                      })
                   }
                   return arrSelects.length ? arrSelects : undefined;
                }
                
                function breakChain(select) {
                // Rimuove ricorsivamente tutti gli elementi select creati dopo quello specificato
                   
                   if (!$(select).data('children')) return;
                   
                   $(select).each(function(){
                      breakChain($(this).data('children'));
                      
                      $($(this).data('children')).remove();
                   })
                }
                
                function err(){
                // Visualizza, sulla console, il messaggio di errore
                    var args = Array.prototype.slice.call(arguments); args.unshift('ERR  chainedSelect:'); console.error.apply(console, args);
                }
             }
             
             // Inizializzo la catena di select
             $('.riga').chainedSelect(schema);
             
          </script>
       </body>
    </html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #30
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Qui una "breve" relazione (parlo al presente per rendere scorrevole il discorso):

    Prendo come riferimento il tuo progetto iniziale per ciò che riguarda il risultato puramente funzionale dal punto di vista dell'utente, il primo passo è quello di ideare un possibile sistema che generi il tutto in modo dinamico, sviluppando uno script che sia eventualmente personalizzabile, riutilizzabile ed estensibile (caratteristiche favorite della programmazione ad oggetti). Il sistema prevede la creazione/comparsa di una catena di select in base ai valori man mano selezionati sugli stessi elementi select, con la possibilità di poter comunque modificare le selezioni già effettuate e quindi aggiornare la catena in tempo reale.

    L'uso di jQuery facilita notevolmente il processo di manipolazione degli elementi e si presta alla semplificazione di processi complessi che richiederebbero altrimenti lo sviluppo di una barca di codice. Per questo mi appoggio pienamente a jQuery e decido inoltre di impostare il sistema come un "semplice" plugin (qui una linea guida).

    Sostanzialmente creo la funzione chainedSelect che aggiungo ai metodi jQuery. In questo modo è possibile applicare il sistema ad un qualsiasi oggetto jQuery, ad esempio (nel nostro caso) a tutti gli elementi di classe riga.
    codice:
    $('.riga').chainedSelect(schema);
    L'idea di base, per creare il sistema dinamico di select concatenate, è quella di impostare uno schema in cui è definita gerarchicamente la cascata di tutti i relativi valori delle option per ogni singola select che può essere creata.

    Ovviamente non esiste uno standard per creare una cosa del genere, si tratta comunque di realizzare un qualcosa che poi sia possibile far digerire facilmente al nostro sistema. Il tutto va studiato in base alle caratteristiche ed esigenze dettate dal progetto stesso. Per tale motivo mi serviva avere uno schema iniziale che riportasse una situazione verosimile. Per la struttura dello schema decido di usare un oggetto JSON (per cui potremmo eventualmente anche interfacciarlo facilmente con altre parti del progetto qualora servisse; ad esempio per la funzione di correzione dei risultati).

    In questa fase mi sono cimentato a riprodurre uno schema partendo dal tuo sistema e analizzando tutte le possibili combinazioni, nonché cercando opportune informazioni sul web riguardo l'analisi morfologica.

    Sono arrivato a stilare questo prospetto:
    codice:
     □ categoria
     ┌ articolo
     │    
     │  □ tipo
     │  ┌ determinativo
     │  ├ indeterminativo
     │  └ partitivo
     │    
     │  □ genere
     │  ┌ maschile
     │  └ femminile
     │    
     │  □ numero
     │  ┌ singolare
     │  └ plurale
     │    
     ├ nome
     │    
     │  □ modo
     │  ┌ comune
     │  └ proprio
     │    
     │  □ riferimento
     │  ┌ di persona
     │  ├ di animale
     │  └ di cosa
     │    
     │  □ cognizione
     │  ┌ concreto
     │  └ astratto
     │    
     │  □ entità
     │  ┌ individuale
     │  └ collettivo
     │    
     │  □ genere
     │  ┌ maschile
     │  └ femminile
     │    
     │  □ aspetto
     │  ┌ mobile
     │  ├ genere comune
     │  ├ indipendente
     │  └ promiscuo
     │    
     │  □ numero
     │  ┌ singolare
     │  └ plurale
     │    
     │  □ struttura
     │  ┌ variabile
     │  ├ invariabile
     │  ├ difettivo
     │  └ sovrabbondante
     │    
     │  □ forma
     │  ┌ primitivo
     │  ├ derivato
     │  ├ composto
     │  └ alterato
     │    
     ├ aggettivo
     │    
     │  □ classe
     │  ┌ qualificativo
     │  │    
     │  │  □ grado
     │  │  ┌ positivo
     │  │  │     
     │  │  │  □ genere
     │  │  │  ┌ maschile
     │  │  │  └ femminile
     │  │  │    
     │  │  │  □ numero
     │  │  │  ┌ singolare
     │  │  │  └ plurale
     │  │  │  
     │  │  ├ comparativo
     │  │  │    
     │  │  │  □ paragone
     │  │  │  ┌ di maggioranza
     │  │  │  ├ di minoranza
     │  │  │  └ di uguaglianza
     │  │  │    
     │  │  │  □ genere
     │  │  │  ┌ maschile
     │  │  │  └ femminile
     │  │  │    
     │  │  │  □ numero
     │  │  │  ┌ singolare
     │  │  │  └ plurale
     │  │  │    
     │  │  ├ superlativo
     │  │  │    
     │  │  │  □ tipo
     │  │  │  ┌ relativo
     │  │  │  └ assoluto
     │  │  │    
     │  │  │  □ genere
     │  │  │  ┌ maschile
     │  │  │  └ femminile
     │  │  │    
     │  │  │  □ numero
     │  │  │  ┌ singolare
     │  │  │  └ plurale
     │  │      
     │  ├ determinativo
     │  │    
     │  │  □ specificazione
     │  │  ┌ possessivo
     │  │  ├ dimostrativo
     │  │  ├ indefinito
     │  │  ├ interrogativo
     │  │  ├ esclamativo
     │  │  └ numerale
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │    
     ├ pronome
     │    
     │  □ tipo
     │  ┌ personale
     │  │    
     │  │  □ funzione
     │  │  ┌ soggetto
     │  │  └ complemento
     │  │    
     │  │  □ persona
     │  │  ┌ 1ª pers.
     │  │  ├ 2ª pers.
     │  │  └ 3ª pers.
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ relativo
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ possessivo
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ dimostrativo
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ indefinito
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ interrogativo
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ esclamativo
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │  │    
     │  ├ numerale
     │  │    
     │  │  □ genere
     │  │  ┌ maschile
     │  │  └ femminile
     │  │    
     │  │  □ numero
     │  │  ┌ singolare
     │  │  └ plurale
     │    
     ├ verbo
     │    
     │  □ coniugazione
     │  ┌ 1ª coniugazione
     │  ├ 2ª coniugazione
     │  ├ 3ª coniugazione
     │  └ con. propria
     │    
     │  □ modo
     │  ┌ indicativo
     │  ├ congiuntivo
     │  ├ condizionale
     │  ├ imperativo
     │  ├ infinito
     │  ├ participio
     │  └ gerundio
     │    
     ├ avverbio
     │    
     │  □ forma
     │  ┌ primitivo
     │  ├ derivato
     │  ├ composto
     │  └ locuzione
     │    
     │  □ specie
     │  ┌ di modo
     │  │    
     │  │  □ grado
     │  │  ┌ positivo
     │  │  ├ comparativo
     │  │  └ superlativo
     │  │    
     │  │  □ alterazione
     │  │  ┌ diminutivo
     │  │  ├ vezzeggiativo
     │  │  ├ accrescitivo
     │  │  └ dispregiativo
     │  │    
     │  ├ di tempo
     │  ├ di luogo
     │  ├ di quantità
     │  ├ valutativi
     │  ├ interrogativi
     │  ├ esclamativi
     │  └ presentativi
     │    
     ├ preposizione
     │    
     │  □ tipo
     │  ┌ propria
     │  │    
     │  │  □ forma
     │  │  ┌ semplice
     │  │  └ articolata
     │  │    
     │  ├ impropria
     │  └ locuzione
     │    
     ├ esclamazione
     │    
     │  □ tipo
     │  ┌ propria
     │  ├ impropria
     │  └ locuzione
     │    
     ├ congiunzione
     │    
     │  □ forma
     │  ┌ semplice
     │  ├ composta
     │  └ locuzione
     │    
     │  □ funzione
     │  ┌ coordinante
     │  └ subordinante
    Ogni quadratino identifica un elemento select per il quale sono presenti le relative opzioni (a seguire sotto il quadratino). Ogni segmento verticale, che si sviluppa tra due option, può comprendere zero o più select a cascata. Cioè per ogni valore (option) selezionato possono esserci zero select oppure uno, oppure un gruppo di più select che devono andare a crearsi.

    Nota a margine: rispetto al tuo progetto ho voluto dotare ogni select di un primo elemento option che facesse da etichetta, piuttosto che lasciare una stringa vuota. Questo può essere un ulteriore aiuto per l'utente. I nomi di queste etichette non sono sicuro siano tutti correttamente appropriati, lascio eventualmente a te l'onere di correggerli.

    Ovviamente l'intero schema è personalizzabile. Il tutto va comunque tradotto come oggetto JSON, che vediamo qui di seguito.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.