Tại sao lệnh CoffeeScript nếu/else của tôi không hoạt động?

Question

Tôi đã cố cập nhật tổng giá khi ai đó thay đổi tùy chọn đã chọn. Đây là yếu tố chọn Tôi đang sử dụng:

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

Đây là jQuery Tôi đang sử dụng:

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

Nó hoạt động một cách hoàn hảo. Nó thay đổi giá thành $ 12 và hiển thị thông báo giảm giá. Nếu tôi thay đổi tùy chọn chọn trở về One/1, nó sẽ thay đổi văn bản trở lại $ 5 và loại bỏ thông báo giảm giá.

Tôi đã chuyển đổi thành CoffeeScript nhưng nó chỉ hoạt động khi tôi thực hiện thay đổi đầu tiên. Giá được cập nhật. Tuy nhiên, khi tôi cố gắng thay đổi nó trở lại tùy chọn 1, nó không cập nhật.

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" 

Tôi đã làm việc này hàng giờ và sáng suốt trí thông minh của mình. Mọi sự trợ giúp sẽ rất được trân trọng.

Answer 1

selection = 1 bên trong câu hỏi if của bạn là (vẫn) một bài tập trong CoffeeScript, bạn cần sử dụng == để so sánh. Hãy thử điều này:

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" 

Ngoài ra, == is converted to === vì vậy bạn sẽ muốn so sánh với chuỗi trừ khi bạn muốn "đúc" giá trị của bạn đến một số sử dụng selection = +select.val() (nhờ Trevor Burnham cho lừa đúc này) hoặc parseInt(select.val(), 10).

Answer 2

Bạn có thể sử dụng chuyển đổi:

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

Ngoài ra bạn có thể lấy đi return, bởi vì chức năng sẽ luôn luôn trả giá trị cuối cùng của họ.

Answer 3

Đây là 0,50 xu của tôi. Hãy xem xét 2 điều: nó chỉ là ý kiến ​​đơn giản của tôi và nó có thể không phải là câu trả lời hay nhất của thế giới.

a) Nếu bạn đã có một sự trở lại bên NẾU tuyên bố, không cần 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" 

Và không, IMHO, đặt else if doesnt cải thiện khả năng đọc. Trở lại là một sự trở lại. Giai đoạn. Nó là đơn giản như vậy.

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

Nhưng, tốt hơn tất cả là loại bỏ IF, ELSE, SWITCH và tất cả những thứ đó. Hãy suy nghĩ OOP và mã của bạn có thể bắt đầu trở nên tốt hơn. Điểm xuất phát có thể là:

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 

Vì vậy, đây là nó. Gần như cùng một mã, nhưng với một thực hiện tốt hơn (imho). Cảm ơn bạn.