如何更好地组织咖啡

Question

我有以下代码：

  hideOther = -> 
   $('[class^=addition_translation]').hide()

  $('.en_addition').click ->
    hideOther()  
    $('.addition_translation_en').show()

  $('.pl_addition').click ->
    hideOther()  
    $('.addition_translation_pl').show()

  $('.de_addition').click ->
    hideOther()  
    $('.addition_translation_de').show()

  $('.fr_addition').click ->
    hideOther()  
    $('.addition_translation_fr').show()

  $('.it_addition').click ->
    hideOther()  
    $('.addition_translation_it').show()

  $('.ua_addition').click ->
    hideOther()  
    $('.addition_translation_ua').show() 

  $('.ru_addition').click ->
    hideOther()  
    $('.addition_translation_ru').show()   

没有这种不必要的重复，编写此代码的最佳方法是哪种？

编辑：

  countries = ["pl", "en"]
     for country in countries
       $(".#{country}_addition").click ->
        hideOther()  
        $(".addition_translation_#{country}").show()

我这样做，也许是更好的方法？

Answer 1

使用正确的缩进（因为在CoffeeScript中缩进很重要），就可以了：

countries = ["pl", "en"]
for country in countries
  $(".#{country}_addition").click ->
    hideOther()  
    $(".addition_translation_#{country}").show()

它确实为每个.XX_addition元素设置了一个单独的函数，但是除非有成千上万个元素或它们被动态添加，否则应该没问题。

另一个选择是事件委托，它具有一个处理所有这些元素的功能。 当列表是动态的时，这（再次）特别方便。

假设所有这些.addition_translation_XX元素都在某个容器中（我称其为.container ）：

$(".container").on "click", "[class$=_addition]", ->
  country = this.className.substring 0, 2
  $("[class^=addition_translation]").hide()
  $(".addition_translation_#{country}").show()

我们在这里说的是：钩住容器，但是只有在它通过匹配"[class$=_addition]"的元素（其类属性以 _addition 结尾的元素）时，才调用我们的处理程序。 jQuery将调用我们的处理程序与this指的是元素，所以我们得到了国家从className ，隐藏其他国家，并表明一个。

请注意，就像您的"[class^=addition_translation]"选择器假定XX_addition_translation类是这些元素的类列表中唯一的（或至少最后一个）类一样，以上假定XX_addition是唯一的（或至少第一个）类。在这些元素的类列表中。 在这两种情况下，我都不会做出这样的假设，因为它是脆弱的。 相反，我将使用一个类来标记没有国家/地区信息的元素（因此，只需添加.addition和.addition_translation ，然后向其添加data-country属性即可：

<span class="addition" data-country="ru">...</span>
<div class="addition_translation" data-country="ru">...</div>

然后：

$(".container").on "click", ".addition", ->
  country = this.getAttribute "data-country"
  $(".addition_translation").hide()
  $(".addition_translation[data-country=#{country}]").show()