variazione colore con jquery

[fabioweb90]

Buonasera,
per questo e-commerce che sto realizzando con woocommerce vorrei visualizzare una variazione di colore sulla selezione come da allegato.

colore.jpg

#colore {
    display: inline-block;
    width: 20px;
    height: 20px;
}

<script type="text/javascript">
  jQuery(document).ready(function($) {
       $("select[name='attribute_pa_colore-telo']").change(function() { 
       $("#colore").css("background-color", "#" + $(this).val());
        });
        
       $("#pa_colore-telo").after("<span id='colore'></span>");
    });
</script>

Cosa sbaglio secondo voi?

Grazie dell'aiuto

[Xinod]

l' errore non e' nel codice che hai postato
e' difficile suggerirti altro che mettere un po' di alert o console.log per cominciare a debuggare

ciao

[fabioweb90]

Ok a quanto pare wordpress non mi accetta il # nel value..
Cosa potrei fare in alternativa a questo codice?

[KillerWorm]

Ciao, quoto Xinod, anche per me il codice da te postato non ha particolari errori.
Però ho dato uno sguardo al sorgente della pagina linkata e noto che sul jquery manca proprio il cancelletto che qui hai invece concatenato a $(this).val().

Questo è quanto risulta dal sorgente pagina:

$("select[name='attribute_pa_colore-telo']").change(function() {
    $("#colore").css("background-color", $(this).val());
});

Non ho modo di provare su wordpress e forse mi sto perdendo qualcosa ma non capisco comunque questa tua affermazione:

a quanto pare wordpress non mi accetta il # nel value

Anche se così fosse, non mi torna il fatto che il cancelletto non sia presente neppure sul jquery (nel codice sorgente).

[fabioweb90]

innanzittuto vi ringrazio per la vostra rassicurazione. Ritornando al discorso jquery ho fatto un test togliendo la concatenazione "#" + $(this).val()); e sostituendo il value del "nero" con "black" in modo tale da ottenre background color: black che in ogni caso non si visualizza

(escludo quindi che sia il "#" il problema)

Inoltre ho fatto un test scolpendo nel codice una nuova select e come potete notare funziona tranquillamente..

Boh è strano

[KillerWorm]

Non ho capito se hai risolto.

Scusa se insisto ma continuo a vedere che nel codice sorgente manca il cancelletto che dovrebbe essere concatenato al value:

 jQuery(document).ready(function( $ ) {
        $("select[name='test_attributo']").change(function() {
            $("#colore").css("background-color", "#" + $(this).val()); // <<<<<<< Qui c'è il cancelletto

        });
        $("#test").after("<span id='colore'></span>");

$("select[name='attribute_pa_colore-telo']").change(function() {
            $("#colore").css("background-color", $(this).val()); // <<<<<<< Qui manca

        });
        $("#pa_colore-telo").after("<span id='colore'></span>");

    });

[tampertools]

Debuggando la pagina sembra che non ci sia nessun'evento legato alla select...

[fabioweb90]

Scusami te killerworm se ho generato un pò di confusione. Purtroppo non ho risolto e il motivo per cui non vedevi il cancelletto era dovuto al fatto che stavo facendo una prova (esito negativo) con un value non esadecimale

<option class="active" value="black"></option>
<option class="active" value="red"></option>

La select in "test colore" (scolpita nel codice come si suol dire) invece funziona correttamente..

Debuggando la pagina sembra che non ci sia nessun'evento legato alla select...

Per wordpress non esiste ma secondo noi dovrebbe essere tutto a posto!

[KillerWorm]

Purtroppo non ho risolto e il motivo per cui non vedevi il cancelletto era dovuto al fatto che stavo facendo una prova (esito negativo) con un value non esadecimale

Sì, ho capito che stavi facendo delle prove con i nomi colore, ma attualmente hai reinserito i value come esadecimali, mentre il cancelletto sullo script continua a non esserci. Capisco che il problema persista comunque, ma dovresti ripristinare perlomeno lo script, altrimenti non avrai comunque nessun riscontro visivo, nel caso si venga a capo del problema.

Ad ogni modo mi viene da pensare, se quelle select vengono create in modo dinamico (così mi pare di capire) dovrai verificare che lo script incriminato, venga eseguito dopo la creazione stessa delle select. Questo perché se quella select non è ancora presente nel momento in cui viene "letto" questo selettore jquery $("select[name='attribute_pa_colore-telo']"), non verrà trovato alcun elemento a cui applicare il change.

Non ho capito come vengono create le select, però puoi fare una semplice prova. Sposta tutto lo script alla fine del tag <body>, togliendolo quindi dall'head. Questo dovrebbe fare in modo che quello script sia "letto" solo alla fine, presumibilmente dopo che le select vengono create.

Prova e facci sapere. Se non dovesse fungere, fammi capire come vengono create le select.

[fabioweb90]

siiiiiiiiiiiiii genioooooooooooo abbiamo risolto l'arcano
grazie infinite!!!