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属性用作故障转移

Answer 2

做这样的事情

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

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

$('a.links').click(function() {
    $('#' + $(this).attr('id') + '-content').slideToggle()
});

在您的ID中添加下划线只会让您的问题变得更难，更少动态;确定它可以完成。你只需要获取ID attr并在每个角色之间插入一个下划线，但是......我必须真正说明这一点。

Answer 3

我会这样做：

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

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

和JS：

$(document).ready(function(){
  $('.toggler').click(function(){
    $('#'+$(this).attr('toggle')).slideToggle();
  });
});

它的通用解决方案，可以用于各种方式。

干掉JQuery

3 个答案: