JQUERY una lotta per ordinare immagini e checkbox

Settimana scorsa ho fatto a pugni con Jquery e con le Checkbox. Il mio scopo era riuscire a selezionare delle immagini per recuperarne l’ID con cui erano inserite in tabella su MYSQL.
Il mio pensiero è stato quello di legare ad ogni immagine una checkbox. Cosi, potevo assegnare al valore della checkbox l’ID dell’immaigne.

Per creare il codice ho utilizzato JsFiddle un comodo servizio online che permette di creare degli script js con relativo codice html e css potendoli modificare al volo e potendoli condividere. Il servizio è molto usato e per me è stata la prima vera volta (ho sempre visto usare dagli altri).

Quindi ho iniziato a creare il primo codice che semplicemente presenta quattro immagini tratte da lorempixel, ogniuna con il suo checkbox ed uno di questi selezionato. Come JS ho scritto due semplici funzioni. La prima parsa tutti checkbox e controlla se sono selezionati, la seconda flagga un checkbox al click sull’immagine.
Per visualizzare il risultato, assegnavo una classe di evidenza all’immagine se selezionato il checkbox.

Nella seconda versione dello script ho semplicemente aggiunto un pulsante button ed una funzione legata ad esso: al suo click, recupera tutti i checkbox attivi e copia il loro valore all’interno di un campo text.L’operazione sarebbe piuttosto semplice, ma il mio scopo era quello di ordinare i valori delle checkbox attive, in base all’ordine con cui sono state cliccate.
Per farlo ho scopiazzato e modificato il codice funzionante trovato su un forum online con l’esempio su JsFiddle. DI questo codice ne sono state scritte due versioni e la seconda di queste è decisamente più semplice come idea.
Purtroppo questo codice non ha funzionato nel mio caso poichè io devo agire sull’immagine e non direttamente sulla checkbox. Attualmente non ho ancora scoperto come fare.
Per cercare di capire come funzionano questi due script ho anche inserito, nella mia terza versione la funzione inspect che serializza l’oggetto passato.

Nonostante tutti i tentativi fatti, dalla quarta versione del codice fino alla undicesima ed anche con l’aiuto del forum di html.it non sono riuscito a venirne a capo. Il problema rimaneva legato al fatto che l’object jquery dei Checkbox non veniva manipolato dalle funzioni che gestivano gli array objectHTML, proprio come mostravano i due esempi trovati online.

Sono giunto allora alla conclusione di eliminare completamente i checkbox, e di gestire tutto tramite le immagini, ottenendo cosi una dodicesima,tredicesima e quattordicesima temporanea versione ed una finale e funzionante quindicesima versione.

In quest’ultima versione sfrutto il metodo on() di Jquery, ho letto sostituisce sia il bind(), il delegate() ed il live() ma è funzionante solo dalla versione 1.7.2 di Jquery, per gestire tutte le funzioni.
Nell’esempio assegno all’attributo id il valore di ogni immagine.
Al click su ogni immagine eseguo un toggle della classe, controllo se è stata assegnata la classe ed in caso affermativo elimino dall’elenco (un array) delle immagini l’attuale, per poi andare ad aggiungerla in fondo all’array.
Con la seconda funzione, recupero da tutto l’array delle immagini, quelle con la classe assegnata e le ritrovo cosi ordinate in base al click.

Leggi il contenuto originale su KREATORE.IT