javascript - 如何更好地组织 coffeescript

Question

我有以下 CoffeeScript 代码:

  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 元素上设置了一个单独的函数，但除非它们有数千个或者它们是动态添加的，否则应该没问题。

您的另一个选择是事件委托(delegate)，具有处理所有这些元素的一个 函数。当列表是动态的时，这(再次)特别方便。

假设所有这些 .addition_translation_XX 元素都在某个容器中(我将其称为 .container):

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

我们说的是: Hook 容器上的点击，但只有当它通过匹配 "[class$=_addition]" 的元素时才调用我们的处理程序(一个元素的类属性 < em>以_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()