Pagina 2 di 4 primaprima 1 2 3 4 ultimoultimo
Visualizzazione dei risultati da 11 a 20 su 32

Discussione: Creazione ciclo jquery

  1. #11
    Inserisco dopo il post #12
    Ultima modifica di Hans Castorp; 17-02-2018 a 10:28 Motivo: Correzione codice

  2. #12
    Posto qui sotto il codice ridotto, ma che ripulisce ed esemplifica perfettamente quello che mi serve: ho anche commentato il ragionamento di scrittura dello script, che sicuramente è sbagliato dal punto di vista concettuale.
    Per ora riesco a condizionare correttamente l'onchange del primo select della prima riga, che alla opzione[1] colora di rosso il secondo select della stessa riga.
    Dovrei invece riuscire ad iterare per tutte le righe il recupero della id del contenitore dei select, come consigliatomi. Cosa che con questo script non riesco a fare.
    Ultima modifica di Hans Castorp; 17-02-2018 a 10:30

  3. #13
    codice:
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function()
    {
    
    //Imposto un ciclo con selettore il primo select di ciascuna riga
    $(".riga select:first-child").each(function(){
        //verifico che il selettore sia corretto colorandone lo sfondo in giallo
        $(this).css("background","yellow"); 
        //imposto l'onchange alla selezione dell'opzione corrispondente ad A stampata a schermo per ciascun selettore già definito
        $(this).change(function()
        {
        if ($(this)[0].selectedIndex == 1)
            {
            //acquisisco l'id del parent div del select
            var $detectid = $("select").parent("div").attr("id");
            //stampo a schermo l'id come verifica
            $("#demo").html($detectid);
            //recupero la e la imposto nella stringa del selettore del secondo campo
            $( "#"+ $detectid + " select:nth-of-type(2) option").css("background","red");
            }
        });
    });
    
    
    });
    </script>
    </head>
    <body>
    
    <div>stampa a schermo id del div all'onchange:<span id="demo"></span></div>
    <br>
    <div>Al clic sull'opzione A di ciascuna riga, desidero che lo sfondo della seconda opzione della riga corrispondente abbia lo sfondo rosso.</div>
    <br>
    <div class="riga-container" id="riga-1">
     <div class="riga" id="riga-1-1">
      <select id="riga-1-1-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-1-1-2"><option></option><option></option><option></option></select>
     </div>
      <div class="riga" id="riga-1-2">
      <select id="riga-1-2-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-1-2-2"><option></option><option></option><option></option></select>
     </div>
    </div>
    <br>
    <div class="riga-container" id="riga-2">
     <div class="riga" id="riga-2-1">
      <select id="riga-2-1-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-2-1-2"><option></option><option></option><option></option></select>
     </div>
      <div class="riga" id="riga-2-2">
      <select id="riga-2-2-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-2-2-2"><option></option><option></option><option></option></select>
     </div>
    </div>
    </body>
    </html>

  4. #14
    Stavo pensando che potrei anche creare un array con le id delle righe e poi ciclare per ciascuna di esse l'onchange.

  5. #15
    Incredibile ma vero, dovrei avercela fatta:

    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    
    <script>
    
    //apre esecuzione javascript
    $(document).ready(function(){
    
    //mette in un array tutte le id di una classe
    var ids = $('.riga').map(function(i) {return this.id;});
    
    //stampa a schermo l'array con javascript
    var listaid = "";
    
    for (i = 0; i < ids.length; i++)
        {
        listaid += ids[i];
        }
    
    $(".riga").each(function(i){
      $("#" + ids[i + 0] + " select:nth-of-type(1)").css("background","yellow");
      
      $("#" + ids[i + 0] + " select:nth-of-type(1)").change(function()
        {
        if ($(this)[0].selectedIndex == 1)
            {
            $("#" + ids[i + 0] + " select:nth-of-type(2)").css("background","red");
            }
    
    });
    });
    
    //chiude esecuzione javascript
    });
    
    
    
    </script>
    
    <div class="riga-container" id="riga-1">
     <div class="riga" id="riga-1-1">
      <select id="riga-1-1-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-1-1-2"><option></option><option></option><option></option></select>
     </div>
      <div class="riga" id="riga-1-2">
      <select id="riga-1-2-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-1-2-2"><option></option><option></option><option></option></select>
     </div>
    </div>
    <br>
    <div class="riga-container" id="riga-2">
     <div class="riga" id="riga-2-1">
      <select id="riga-2-1-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-2-1-2"><option></option><option></option><option></option></select>
     </div>
      <div class="riga" id="riga-2-2">
      <select id="riga-2-2-1"><option></option><option>a</option><option>b</option></select>
      <select id="riga-2-2-2"><option></option><option></option><option></option></select>
     </div>
    </div>
    
    
    
    
    </body>
    </html>


    Grazie a tutti per i consigli, in particolare a Killer e Cavicchi!

  6. #16
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Bene, mi fa piacere tu sia riuscito a risolvere, buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #17
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Bene, mi fa piacere tu sia riuscito a risolvere, buon proseguimento
    Il proseguimento è che lo script è pesantissimo, improponibile. Quindi lavorerò su quello.

  8. #18
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Il proseguimento è che lo script è pesantissimo, improponibile. Quindi lavorerò su quello.
    L'importante è che tu ne sia cosciente.

    Un punto può essere quello di rivedere meglio la composizione dei selettori jQuery. Teoricamente non avresti bisogno nemmeno di ciclare gli id in quel modo per costruire i vari selettori, ma già usando una sintassi che selezioni i vari elementi in modo opportuno, con un unico selettore puoi andare ad applicare direttamente i vari metodi.

    Nel caso ti serva qualche altro suggerimento in merito, siamo qui.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #19
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio

    Un punto può essere quello di rivedere meglio la composizione dei selettori jQuery. Teoricamente non avresti bisogno nemmeno di ciclare gli id in quel modo per costruire i vari selettori, ma già usando una sintassi che selezioni i vari elementi in modo opportuno, con un unico selettore puoi andare ad applicare direttamente i vari metodi.

    Nel caso ti serva qualche altro suggerimento in merito, siamo qui.
    Ci penserò allora. La cosa interessante per un autodidatta come me è che una soluzione diversa (e in alcuni casi migliore) è sempre possibile, quindi la ricerca è sempre interessante.

    Un paio di domande:
    1. Come faccio secondo te ad ottenere lo stesso risultato senza ciclare le id se ogni select all'onchange deve determinare l'apparizione/scomparsa di altri select che si trovano sulla stessa riga?
    2. Se intervengo direttamente sul php che genera l'html con le condizioni apparizione/scomparsa dei select dovrei velocizzare il caricamento dei campi?

  10. #20
    Uhhhh! Forse ci sono! Si può dire in qualche modo a jquery di mettere come selettore tutte le id messe in un array e di applicare a ciascuna di queste (per cui si utilizzera il selettore "this" nel ciclo) il metodo onchange?
    In questo modo dovrei riuscire (ditemi se sbaglio) ad evitare l'utilizzo del parametro index nel ciclo, che probabilmente appesantisce il ciclo stesso.
    Sono sulla strada sbagliata?
    Ultima modifica di Hans Castorp; 18-02-2018 a 13:11

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.