recuperare valore in base all'elemento cliccato

**sara94** · 02-09-2016, 19:07

Salve a tutti
Ho già scritto qualche giorno fa per un problema, ma adesso se ne è presentato un altro.
Devo creare una specie di giochino sulla matematica.
Praticamente ho dei DIV a cui ho dato un'immagine di background raffigurante delle monete con i numeri 10 - 5 e 1 .. Usando queste monete devo arrivare ad un numero x, deciso da me a priori e poi cliccando su un bottone, se il valore che l utente ha creato, cliccando sulle varie monete, corrisponde a quello deciso da me, verrà visualizzato un alert .
Adesso il problema ! Le monete dovrebbero valere rispettivamente quanto c è scritto nell'immagine (es. La moneta con il numero 10, dovrebbe avere un valore di 10) ma da quello che so, nel tag DIV non si può inserire "value".
Inoltre al click delle varie monete questo valore dovrebbe sommarsi... Mi spiego meglio: se clicco prima su una moneta da 10 e poi su una da 5, mi dovrebbe dare un valore di 15 che verrebbe confrontato al click del bottone, con il valore predefinito che ho inserito io.

Come posso fare tutto questo ? Sono nel pallone più totale non sapendo nemmeno da dove iniziare.
Aiutatemi per favore.

Spero di essermi spiegata bene.
Grazie

**lucavizzi** · 02-09-2016, 19:58

Originariamente inviata da sara94

Adesso il problema ! Le monete dovrebbero valere rispettivamente quanto c è scritto nell'immagine (es. La moneta con il numero 10, dovrebbe avere un valore di 10) ma da quello che so, nel tag DIV non si può inserire "value".

Per i div, come per tutti gli elementi del DOM, si possono usare i data-attribute (a pagina 2 viene mostrato come interagirci trami js).

Originariamente inviata da sara94

Inoltre al click delle varie monete questo valore dovrebbe sommarsi... Mi spiego meglio: se clicco prima su una moneta da 10 e poi su una da 5, mi dovrebbe dare un valore di 15 che verrebbe confrontato al click del bottone, con il valore predefinito che ho inserito io.
Come posso fare tutto questo ? Sono nel pallone più totale non sapendo nemmeno da dove iniziare.

Ti propongo una semplice implementazione che utilizza, per mia comodità, jQuery.
Dovrebbe servire solo a darti un possibile scenario, magari potresti re-implementare il funzionamento usando il puro JavaScript.

Javascript va spesso a braccetto con i fogli di stile, in questo caso ho usato una classe, "selected_image", per "marcare" le "monete" cliccate (se le riclicchi si deselezionano).

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Math Game</title>
<script src="http://ajax.googleapis.com/ajax/libs...n.js"></script>
<script type="text/javascript">
$(function(){
 $('img[data-value]').click(function(){
  $(this).toggleClass('selected_mage');
 });
});
function sum_selected(){
 var sum=0;
 $('.selected_mage').each(function(){
  sum+=Number($(this).data('value'));
 });
 alert(sum);
}
</script>
<style type="text/css">
.selected_mage{
 border:3px solid red;
}
</style>
</head>
<body>
<img src="images/1.jpg" data-value="1">
<img src="images/5.jpg" data-value="5">
<img src="images/10.jpg" data-value="10">
<hr>
<button type="button" onClick="sum_selected()">Sum selected</button>
</body>
</html>

P.S:
Per quanto possibile, evita di usare, nei titoli, frasi come "Non so da dove iniziare .. Aiuto !"

**ciro78** · 02-09-2016, 20:36

Ciao Sara,
ti ho corretto il titolo. Fai più attenzione la prossima volta.

**sara94** · 02-09-2016, 22:17

Grazie mille !!
Ho fatto qualche piccolissimo aggiustamento per adattarlo al mio lavoro ma funziona a meraviglia...poi anche io uso jquery quindi non c'è stato nessun problema.

E grazie per il consiglio .. la prossima starò più attenta al titolo.

Discussione: recuperare valore in base all'elemento cliccato

Strumenti discussione

Ricerca discussione

Visualizza

recuperare valore in base all'elemento cliccato

Permessi di invio