colore condizionale

[Fabio90]

Buonasera,
per questo e-commerce che sto realizzando avrei necessità di implementare la visualizzazione del colore in modo condizionale.

In pratica quando viene selezionato il colore telo "bianco" a destra dovrà comparire un quadratino bianco, beige, quadratino beige e così via..
In pseudocodice avrei pensato una struttura di questo tipo

//radio button attivo bianco
//show immagine bianco.jpg
//radio button beige attivo
//hide bianco.jpg e mostra beige.jpg

Come posso tradurla?

Grazie del vostro prezioso aiuto

 

[criric]

Ciao, non ho capito se sei obbligato ad usare un immagine per colorare un quadrato.
prova questo

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("input[type='radio']").change(function() {
            $("#color").css("background-color", $(this).val());
        });
    });
</script>
<input checked='checked' type="radio" name="color" value="#ffffff"/> bianco 
<input type="radio" name="color" value="#fffcdf"/> beige 
<input type="radio" name="color" value="#D1D3D4"/> grigio
<input type="radio" name="color" value="#D71635"/> rosso 
<span id="color" style="display:inline-block;width: 20px;height:20px;border:1px solid #555;"></span>

 

[Fabio90]

Ciao criric,
no non sono obbligato ad usare un'immagine. Gestire il colore con lo span è perfetto
Il bottone span dovrebbe quindi essere nascosto di default e apparire quando si effettua una selezione colore..

Ho allegato un'immagine per maggior chiarezza

 

[criric]

Avevo capito che ti serviva un input radio, per una select puoi fare cosi

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("select[name='colori']").change(function() {
            $("#colore").css("background-color", $(this).val());
        });
    });
</script>

<style>
    #colore {
        display: inline-block;
        width: 20px;
        height: 20px;
    } 
</style>
<select name="colori">
    <option value="transparent"></option>
    <option value="green">verde</option>
    <option value="red">rosso</option>
    <option value="yellow">giallo</option>
    <option value="blue">blue</option>
</select> 
<span id="colore"></span>

 

[Fabio90]

Molto bene. Si può implementare questa struttura in modo da abbinare un colore esadecimale?

 

[criric]

Basta che cambi nel value il nome del colore con il suo valore esadecimale, non ci credo che non ci hai neanche provato

 

[Fabio90]

Si si ho provato. Mi sono dimenticato di specificare che il sito è fatto in wordpress e non accetta un value in questo modo "#4D4D4F" ma "4D4D4F"

Posso agganciare il "#" in qualche modo?

 

[criric]

per concatenare due stringhe in javascript si usa il più +

$("#color").css("background-color", "#" + $(this).val());

 

[Fabio90]

Grazie funziona correttamente. Adesso quello che mi mancherebbe è riuscire a visualizzare il quadratino a fianco della select

<td class="value">
     <select id="pa_colore-telo" name="attribute_pa_colore-telo"></select>
     <span id="colore"></span> //come faccio a collocarlo qui?
</td>

Ho provato con $( "#pa_colore-telo" ).add( "<span id='colore'></span>" ); ma evidentemente non è corretto..

 

[Fabio90]

Ok ho risolto però online non riesco a vedere..
Da cosa può dipendere? Ho inserito tutto correttamente e in una pagina offline funziona correttamente

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

 

[criric]

Si, molto strano, vedo comunque che con la select test colore stai facendo progressi

 

[Fabio90]

Si grazie =) ho risolto inserendo il codice jquery mettendolo dopo il tag </body> invece che nell'head