СУШКА 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 в качестве аварийного переключения

Answer 2

Я бы достиг этого таким образом:

<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();
  });
});

Это своего рода универсальное решение, которое можно использовать различными способами.

Answer 3

Сделай что-нибудь подобное

<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()
});

Добавление подчеркиваний к вашим идентификаторам только делает вашу проблему более сложной и менее динамичной; уверен, что это может быть сделано. Вам просто нужно взять идентификатор attr и вставить символ подчеркивания между каждым символом, но ... это все, что я должен сказать об этом.