Question

当有人更改选择选项时，我一直在尝试更新总价。这是我使用的选择元素：

<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美元并显示折扣消息。如果我将select选项更改回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"

此外，== is converted to ===因此您需要与字符串进行比较，除非您想使用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美分。考虑两件事：它只是我的简单意见，它可能不是世界上最好的答案。

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和所有那些掷骰子。想想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）。谢谢。

为什么我的CoffeeScript if / else语句不起作用？

3 个答案: