Почему не работает мой CoffeeScript, если оператор / else работает?

Question

Я пытался обновить общую цену, когда кто-то меняет опцию выбора.Вот элемент 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"

Я работал над этим часами и сошел с ума.Любая помощь будет принята с благодарностью.

Answer 1

Ваши selection = 1 внутри ваших if операторов (все еще) являются назначениями в 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).

Answer 2

Вы можете использовать переключатель:

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

Также вы можете убрать return, потому что функции всегда будут возвращать свое окончательное значение.

Answer 3

Вот мои .50 центов.Примите во внимание 2 вещи: это просто мое простое мнение, и это может быть не лучшим ответом в мире.

a) Если у вас уже есть возврат в выражении IF, нет необходимости в 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 и всех этих крэпсов.Подумайте, ООП, и ваш код может начать улучшаться.Отправной точкой может быть:

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).Спасибо.