Rails 3 干而不引人注目的 javascript

发布于 2024-10-12 14:02:06 字数 388 浏览 7 评论 0原文

我正在将所有内容更改为不显眼的 javascript,因为我认为它使事情更容易调试等。

我有类似的东西:


$(document).ready(function(){

  $('#photos_link').click(function()
  {
    select_tab('main', 'photos', $(this));
  });

  $('#dealership_link').click(function()
  {
    select_tab('main', 'dealership', $(this));
  });

  $('#dealership').hide();
});

如你所见,我有 2 个非常相似的构造,我想将它们干燥,任何想法?

I am changing everything to unobtrusive javascript, since I think it makes things much easier to debug etc.

I've got something like:


$(document).ready(function(){

  $('#photos_link').click(function()
  {
    select_tab('main', 'photos', $(this));
  });

  $('#dealership_link').click(function()
  {
    select_tab('main', 'dealership', $(this));
  });

  $('#dealership').hide();
});

as you can see I've got 2 very similar constructs, I'd like to dry them out, any ideas ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

怪我太投入 2024-10-19 14:02:06

这里有两个纯 JS 重构:

$(document).ready(function(){
  $('#photos_link, #dealership_link').click(function(){
    select_tab('main', $(this).attr('id').match(/(.*)_link/)[1], $(this));
  });

  $('#dealership').hide();
});

$(document).ready(function(){
  $.each(['photos', 'dealership'], function(key, value) { 
    $('#' + value + '_link').click(function(){
      select_tab('main', value, $(this));
    });
  });

  $('#dealership').hide();
});

个人更喜欢前者。

Here are two pure-JS refactors:

$(document).ready(function(){
  $('#photos_link, #dealership_link').click(function(){
    select_tab('main', $(this).attr('id').match(/(.*)_link/)[1], $(this));
  });

  $('#dealership').hide();
});

and

$(document).ready(function(){
  $.each(['photos', 'dealership'], function(key, value) { 
    $('#' + value + '_link').click(function(){
      select_tab('main', value, $(this));
    });
  });

  $('#dealership').hide();
});

I'd personally prefer the former.

本王不退位尔等都是臣 2024-10-19 14:02:06

在 ApplicationHelper (或适当的帮助器)中创建一个帮助器方法:

def select_tab_click_event(tab)
  js =<<JS
    $('##{tab}_link').click(function()
    {
      select_tab('main', '#{tab}', $(this));
    });
JS
  js.html_safe
end

然后,从您的视图中调用它:

$(document).ready(function(){
  <%= select_tab_click_event('photos') %>
  <%= select_tab_click_event('dealership') %>
}

Create a helper method in ApplicationHelper (or the appropriate helper):

def select_tab_click_event(tab)
  js =<<JS
    $('##{tab}_link').click(function()
    {
      select_tab('main', '#{tab}', $(this));
    });
JS
  js.html_safe
end

Then, call it from your view:

$(document).ready(function(){
  <%= select_tab_click_event('photos') %>
  <%= select_tab_click_event('dealership') %>
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文