Question

我有以下coffescript代码：

  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]"的元素时才调用我们的处理程序（类属性以 {{结尾的元素） 1}}）。 jQuery将调用我们的处理程序_addition引用该元素，因此我们从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>

如何以更好的方式组织咖啡

1 个答案: