javascript - Coffeescript jQuery - 如何重构这个(菜鸟)方法？

Question

开始学习一些编码后，我在 Rails4 应用程序中使用 Bootstrap 做了这个(非常丑陋，非 DRY)星级切换。我已经完成了 Codeschoool CoffeeScript 教程，但似乎 ruby​​ 对我来说更容易学习一些。

是否有人能帮忙提供一些关于“专业人士”如何编写此函数的提示？非常感谢。

@starSwitch =  ->
    label_1 = $("label#1")
    label_2 = $("label#2")
    label_3 = $("label#3")
    label_4 = $("label#4")
    label_5 = $("label#5")

    label_1.click ->
            label_1.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_2.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")
            label_3.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")
            label_4.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")
            label_5.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")

    label_2.click ->
            label_1.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_2.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_3.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")
            label_4.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")
            label_5.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")

    label_3.click ->
            label_1.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_2.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_3.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_4.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")
            label_5.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")

    label_4.click ->
            label_1.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_2.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_3.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_4.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_5.children("i").addClass("icon-star-empty").removeClass("icon-star colorfull")

    label_5.click ->
            label_1.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_2.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_3.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_4.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")
            label_5.children("i").addClass("icon-star colorfull").removeClass("icon-star-empty")

$ -> starSwitch

Answer 1

你可以这样做:

@starSwitch =  ->
  $("label").click ->
    $("label").addClass("icon-star colorfull").removeClass("icon-star-empty")
    $(this).nextAll("label").addClass("icon-star-empty").removeClass("icon-star colorfull")

如果页面上有其他标签，请向星形标签添加一个类(例如 stars)，然后将代码更改为 $("label.stars")。单击 和nextAll("label.stars")。