Pourquoi ne pas en faire mon CoffeeScript si/d'autre déclaration de travaux?

J'ai essayé de mettre à jour un prix total lorsque quelqu'un change l'option de sélection. Voici le sélectionner l'élément que j'utilise:

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

C'est le jQuery que j'utilise:

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");
    }
  });  
});

Il fonctionne parfaitement. Il change le prix de 12 $et montre la remise du message. Si je change l'option sélectionner à Un retour/1, il modifie le texte, dos à 5 $et supprime la remise du message.

J'ai converti ce CoffeeScript, mais il ne fonctionne que quand je fais le premier changement. Le prix est mis à jour. Cependant, lorsque j'essaie de le modifier pour l'option 1, elle n'est pas mise à jour.

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"

J'ai travaillé sur ce projet pendant des heures et je suis à bout de ressources. Toute aide serait grandement appréciée.

OriginalL'auteur Benjamin Welch | 2011-11-11

  1. 26

    Votre selection = 1 à l'intérieur de votre if états est pas (encore) d'une cession effectuée en CoffeeScript, vous devez utiliser == à des fins de comparaison. Essayez ceci:

    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"

    Aussi, == est converti à === de sorte que vous aurez envie de comparer les chaînes sauf si vous voulez "casting" votre valeur à un nombre à l'aide de selection = +select.val() (grâce à Trevor Burnham pour ce casting truc) ou parseInt(select.val(), 10).

    Tout à fait exact. Utilisation selection = +select.val() si vous ne souhaitez convertir le formulaire d'entrée en un nombre.
    Merci beaucoup pour votre aide. Qui a fait le tour.
    N'est-ce pas is préféré pour comparaison, à moins que vous ne souhaitiez type de déclencheur de la coercition?
    est équivalent à == en CoffeeScript de sorte que les deux finissent comme === dans la dernière version JavaScript. Il n'y a pas d'équivalent à du JavaScript == en CoffeeScript donc pas de contrainte de questions.

    OriginalL'auteur mu is too short

  2. 6

    Vous pouvez utiliser switch:

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

    Aussi, vous pouvez prendre loin return, parce que les fonctions seront toujours le retour de leur valeur finale.

    OriginalL'auteur Stan

  3. 1

    Voici mon .50 cents. Prendre en compte 2 choses: ses juste mon simple avis et c'est peut être pas la meilleure solution du monde.

    a) Si vous disposez déjà d'un retour à l'intérieur SI la déclaration, pas besoin d'AUTRE SI

    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"

    Et non, à mon humble avis, met le à l'AUTRE, S'il ne marche pas améliorer la lisibilité. Le retour est un retour. Période. C'est aussi simple que cela.

    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")

    Mais, mieux que tout, est de se débarrasser de if, ELSE, SWITCH et tous ceux craps. Pensez à la programmation orientée objet et votre code pouvez commencer à obtenir mieux. Un point de départ pourrait être:

    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

    Donc, c'est ça. Presque le même code, mais avec une meilleure mise en œuvre (à mon humble avis). Merci.

    OriginalL'auteur ppalmeida