Почему мой оператор CoffeeScript if/else не работает?

Я пытаюсь обновить общую цену, когда кто-то изменяет параметр выбора. Вот элемент выбора, который я использую:

<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 и показывает скидку. Если я изменил вариант выбора на "Один/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"

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

Ответы

Ответ 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() (спасибо Тревор Бернем за этот трюк) или parseInt(select.val(), 10).

Ответ 2

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

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

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

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