Div popup selezione colore

[maverikgoos]

Ciao a tutti e buon anno.

Sto facendo una pagina dove l'utente possa selezionare il colore dei vari punti di un capo di abbigliamento. C'è una lista con colore elastico, elastico vita, laccio vita, ecc...
Vorrei cliccare sopra alla casella che riporta il colore di default e in fadein si apre il div con la selezione della lista dei colori aggiuntivi a disposizione.

Nel codice che segue c'è box2 dove ci sono i colori di default ne colors i colori personalizzati che si aprono in popup. Come posso fare per associare il colore scelto da div colors in box2?

Grazie,
Marco.

<div id="box2">
<h1>Personalizza i colori</h1>
<div id="colors">
[img]color/9.jpg[/img]
[img]color/11.jpg[/img]
[img]color/9.jpg[/img]
[img]color/9.jpg[/img]
[img]color/9.jpg[/img]
[img]color/9.jpg[/img]
[img]color/9.jpg[/img]
</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
<div id="listcolor">[img]color/9.jpg[/img]Colore lacci</div>
</div> 

[cavicchiandrea]

Passi un riferimento univoco (nome/id) quando apri la lista colori

[maverikgoos]

Dovrei fare una funzione per ogni selezione.
Non c'è modo di rendere più dinamico lo script?

[cavicchiandrea]

Forse, ma il concetto è devi riconoscere cosa ha cliccato il cliente/visitatore senza questo dato dubito sia possibile, poi come questo lo sviluppi è molto soggettivo.
Meglio avere un'unica funzione con [x] variabili per gestire l'operazione o è meglio avere [x] funzioni separate, lo decidi tu

[maverikgoos]

Rieccomi,

Allora modificato il codice con un div per ogni colore.

<div id="colors">
[img]color/1.png[/img]
[img]color/2.png[/img]
[img]color/3.png[/img]
[img]color/4.png[/img]
[img]color/8.png[/img]
[img]color/10.png[/img]
[img]color/11.png[/img]
[img]color/12.png[/img]
[img]color/14.png[/img]
[img]color/20.png[/img]
[img]color/27.png[/img]
[img]color/32.png[/img]
[img]color/40.png[/img]
[img]color/50.png[/img]
</div>
<div id="listcolor">

[img]color/10.png[/img]Lacci vita</p></div>
<div id="listcolor">

[img]color/10.png[/img]Elastico vita</p></div>
<div id="listcolor">

[img]color/10.png[/img]Gambe</p></div>
<div id="listcolor">

[img]color/10.png[/img]Coda di topo</p></div>
<div id="listcolor">

[img]color/10.png[/img]Elastico caviglie</p></div>
<div id="listcolor">

[img]color/10.png[/img]Logo anteriore</p></div>
<div id="listcolor">

[img]color/10.png[/img]Logo posteriore</p></div>
</div> 

Mentre il Jquery che ho scritto è questo:

function OpenColors() {
        $('#colors').fadeIn('fast');
        return false;
        }
function CloseColors() {
        $('#colors').fadeOut('fast');
        chscolors = false;
        return false;
        }
        
$("#lcls1").bind("click", function (){
OpenColors();
chscolors = this;
return false;
  });
  
$("#cls1").bind("click", function(){
$(chscolors).attr('src', $(this).attr("src"));
CloseColors();
 }); 

C'è un modo per non scrivere una funzione per ogni colore? Adesso mi trovo a dover scrivere 20 volte lo stesso codice. Non riesco a capire come generare una funzione dinamica.

[cassano]

$("#colors img").on("click", function (){
OpenColors();
chscolors = this;
return false;
  });

[maverikgoos]

Grande! Ho una grande lacuna nella logica javascript.

[cavicchiandrea]

Originariamente inviato da maverikgoos
Grande! Ho una grande lacuna nella logica javascript.

Che si sopperisce studiantolo