J'ai quelques liens et divs sur lesquels j'aimerais avoir la même fonctionnalité. Fondamentalement, vous cliquez sur un lien / bouton / quoi que ce soit choisi comme déclencheur et les diapositives d'espace correspondantes s'ouvrent.

Le balisage ressemble à ...

<!-- 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>

Jusqu'à présent, j'ai essayé de refactoriser

// 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()

Qui fonctionne,

// 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()

Mais le script refactorisé ne fonctionne pas. Des idées?

1
iGbanam 23 nov. 2011 à 18:28

3 réponses

Meilleure réponse

Faites quelque chose comme ça

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

L'ajout de soulignements à votre identifiant ne fait que rendre votre problème plus difficile et moins dynamique; sûr que cela peut être fait. Il suffirait de prendre l'ID attr et d'insérer un trait de soulignement entre chaque personnage mais ... c'est tout ce que j'ai à dire à ce sujet.

1
Jeff Wilbert 23 nov. 2011 à 14:32

J'y arriverais de cette façon:

<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>

Et JS:

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

C'est une sorte de solution universelle, qui peut être utilisée de différentes manières.

1
Thinker 23 nov. 2011 à 14:34

Je ferais

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

De cette façon, vous pouvez utiliser l'attribut css: target comme un basculement

2
Last Rose Studios 23 nov. 2011 à 14:38