Perché non funziona la mia istruzione CoffeeScript if/else?

Question

Ho cercato di aggiornare un prezzo totale quando qualcuno cambia l'opzione di selezione. Ecco l'elemento di selezione che sto utilizzando:

<select id="payment_talks_purchased" name="payment[talks_purchased]"> 
    <option value="1">One</option> 
    <option value="2">Three</option> 
</select> 

Questo è il jQuery che sto usando:

jQuery(document).ready(function() { 
    var price = $(".total-price span.price") 
    var save = $(".savings") 
    $("#payment_talks_purchased").change(function() { 
    var selection = $("#payment_talks_purchased").val() 
    if (selection == 2) { 
     price.html("$12"); 
     save.css("visibility", "visible"); 
    } else if (selection == 1) { 
     price.html("$5"); 
     save.css("visibility", "hidden"); 
    } 
    }); 
}); 

Funziona perfettamente. Cambia il prezzo a $ 12 e mostra il messaggio di sconto. Se cambio di nuovo l'opzione select su One/1, il testo torna a $ 5 e rimuove il messaggio di sconto.

ho convertito questo per CoffeeScript ma funziona solo quando faccio il primo cambiamento. Il prezzo è aggiornato. Tuttavia, quando provo a cambiarlo nuovamente all'opzione 1, non si aggiorna.

jQuery -> 
    price = $(".total-price span.price") 
    save = $(".savings") 
    select = $("#payment_talks_purchased") 
    select.change -> 
    selection = select.val() 
    if selection = 2 
     price.html "$12" 
     return save.css "visibility", "visible" 
    else if selection = 1 
     price.html "$5" 
     return save.css "visibility", "hidden" 

Ho lavorato su questo per ore e sono alla fine del mio ingegno. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Il tuo selection = 1 all'interno delle tue dichiarazioni if è (ancora) un compito in CoffeeScript, è necessario utilizzare == per il confronto. Prova questo:

jQuery -> 
    price = $(".total-price span.price") 
    save = $(".savings") 
    select = $("#payment_talks_purchased") 
    select.change -> 
    selection = select.val() 
    if selection == '2' 
     price.html "$12" 
     return save.css "visibility", "visible" 
    else if selection == '1' 
     price.html "$5" 
     return save.css "visibility", "hidden" 

Inoltre, == is converted to === così si vorrà confrontare con le stringhe a meno che non si vuole "lanciare" il tuo valore a un numero utilizzando selection = +select.val() (grazie a Trevor Burnham per questo casting trick) o parseInt(select.val(), 10).

Answer 2

È possibile utilizzare l'interruttore:

switch selection 
    when '2' 
    price.html "$12" 
    save.css "visibility", "visible" 
    when '1' 
    price.html "$5" 
    save.css "visibility", "hidden" 

Inoltre si può togliere return, in quanto le funzioni restituirà sempre il loro valore finale.

Answer 3

Ecco il mio 50 centesimi. Prendi in considerazione 2 cose: è solo la mia opinione semplice e non può essere la migliore risposta del mondo.

a) Se si dispone già di un ritorno all'interno di IF, non c'è bisogno ELSE IF

jQuery -> 
price = $(".total-price span.price") 
save = $(".savings") 
select = $("#payment_talks_purchased") 
select.change -> 
    selection = select.val() 
    if selection == '2' 
     price.html "$12" 
     // Since you return here, you dont need any other "else if" 
     return save.css "visibility", "visible" 

    price.html "$5" 
    return save.css "visibility", "hidden" 

E no, secondo me, mette l'ELSE IF doesnt migliorare la leggibilità. Il ritorno è un ritorno. Periodo. È semplice come quello

jQuery -> 
price = $(".total-price span.price") 
save = $(".savings") 
select = $("#payment_talks_purchased") 
select.change -> 
    selection = select.val() 
    // "ternary" coffee version (if then else) 
    price.html if selection == '2' then "$12" else "$5") 
    save.css "visibility" (if selection == '2' then "visible" else "hidden") 

Ma, meglio di tutti è sbarazzarsi di IF, ELSE, SWITCH e tutti quei craps. Pensa a OOP e il tuo codice può iniziare a migliorare. Un punto di partenza potrebbe essere:

options = [ 
      {price: '$12', visible:"visible"}, 
      {price: '$5', visible:"hidden"} 
      ]; 
jQuery -> 
    price = $(".total-price span.price") 
    save = $(".savings") 
    select = $("#payment_talks_purchased") 
    select.change -> 
       // If the val of your select was 0 and 1, you wouldnt need the (-1) part 
     selection = parseInt(select.val) -1 
       price.html options[selection].price 
       save.css "visibility" options[selection].visible 

Quindi, questo è. Quasi lo stesso codice, ma con un'implementazione migliore (imho). Grazie.