web-dev-qa-db-ja.com

私のCoffeeScript if / elseステートメントが機能しないのはなぜですか？

私は誰かが選択オプションを変更したときに合計価格を更新しようとしています。これが私が使用しているselect要素です：

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

これは私が使用しているjQueryです：

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

それは完全に動作します。価格が$ 12に変更され、割引メッセージが表示されます。選択オプションをOne/1に戻すと、テキストが$ 5に戻り、割引メッセージが削除されます。

これをCoffeeScriptに変換しましたが、最初の変更を行ったときにのみ機能します。価格を更新しました。しかし、オプション1に戻そうとすると、更新されません。

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"

私はこれに何時間も取り組んできましたが、私の知恵は尽きました。どんな助けでも大歓迎です。

if-statementcoffeescript
15
Benjamin Welch

ifステートメント内の_selection = 1_は、CoffeeScriptでの（まだ）割り当てです。比較には_==_を使用する必要があります。これを試して：

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

また、 _==_は_===_ に変換されるため、selection = +select.val()を使用して値を数値に「キャスト」しない限り、文字列と比較する必要があります。 （ Trevor Burnham このキャスティングトリックに感謝）またはparseInt(select.val(), 10)。

26
mu is too short

あなたはスイッチを使うことができます：

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

また、関数は常に最終値を返すため、returnを取り除くこともできます。

6
Stan

これが.50セントです。 2つのことを考慮に入れてください。それは単に私の単純な意見であり、世界の最良の答えにはなりません。

a）IFステートメント内に既にreturnがある場合、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"

いいえ、私見では、ELSE IFは読みやすさを向上させません。返品は返品です。限目。それは簡単です。

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

しかし、すべてよりも優れているのは、IF、ELSE、SWITCH、およびそれらすべてのクラップスを取り除くことです。 OOPと考えると、コードが改善し始める可能性があります。開始点は次のようになります。

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

これでおしまいです。ほぼ同じコードですが、実装が改善されています（imho）。ありがとうございました。

1
ppalmeida