coffeescript jQuery -如何重构这个(新手)方法

coffeescript jQuery - how to refactor this (noob) approach?

本文关键字：方法 新手 重构 jQuery 何重构 coffeescript      更新时间：2023-09-26

在开始学习一些编码后，我在rails4应用程序中使用bootstrap进行了这个(非常丑陋，非DRY)星级评级切换。我已经完成了codesschool 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

你可以这样做:

@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").click和nextAll("label.stars")。

相关文章：