javascript - 干燥 JQuery

Question

我有几个链接和 div，我希望它们具有相同的功能。基本上，您单击一个链接/按钮/任何选择的触发器，相应的空间幻灯片就会打开。

标记看起来像...

<!-- some code -->
<li><a href="#" id="first">First</a></li>
<li><a href="#" id="second">Second</a></li>
<li><a href="#" id="third">Third</a></li>

<div id="f_i_r_s_t"></div>
<div id="s_e_c_o_n_d"></div>
<div id="t_h_i_r_d"></div>

到目前为止，我已经尝试重构

// script.js.coffee
$(document).ready ->
  $('#first').click ->
    $('#f_i_r_s_t').slideToggle()

// script.js.coffee
$(document).ready ->
  $('#second').click ->
    $('#s_e_c_o_n_d').slideToggle()

// script.js.coffee
$(document).ready ->
  $('#third').click ->
    $('#t_h_i_r_d').slideToggle()

哪个有效，到

// refactored_script.js.coffee
hideables = {
  '#first': '#f_i_r_s_t',
  '#second': '#s_e_c_o_n_d',
  '#third': '#t_h_i_r_d'
}

for content_space, link_trigger in hideables
  $(content_space).hide()
  $(link_trigger).click ->
    $(content_space).slideFadeToggle()

但是重构后的脚本不起作用。有什么想法吗？

Answer 1

我真的会做

<li class="links"><a href="#first">First</a></li>
<li class="links"><a href="#second">Second</a></li>
<li class="links"><a href="#third">Third</a></li>

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

$('li.links a').click(function(e) {
    e.preventDefault();
    target = $(this).attr('href');
    $(target).slideToggle();
});

这样你就可以使用 css :target 属性作为故障转移