jQuery: J'essaye de lier une action de clic à plusieurs éléments avec la même classe

Question

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".slider_link").each(function(i, elem){ 
     elem.click(function(){ 
      $("div#"+elem.attr("tag")).slideUp(300); 
     }); 
    }); 
}); 

</script> 

mais après le premier (vérifié avec l'alerte) il casse en disant qu'index.html n'a aucun clic de méthode ... ce qui est avec cette?

html:

 <li><a href="#" tag="home" class="slider_link">Home</a></li> 
     <li><a href="#" tag="calendar" class="slider_link">Calendar</a></li> 
     <li><a href="#" tag="officers" class="slider_link">Officers</a></li> 
     <li><a href="#" tag="media" class="slider_link">Media</a></li> 

Answer 1

Le problème est que elem est l'élément DOM actuel, pas un objet jQuery qui a le .click() method, soit vous l'envelopper dans un objet jQuery en utilisant $() comme ceci:

$(document).ready(function() { 
    $(".slider_link").each(function(i, elem){ 
     $(elem).click(function(){ 
      $("div#"+$(elem).attr("tag")).slideUp(300); 
     }); 
    }); 
}); 

Ou encore plus court bind tous les mêmes et obtenir l'attribut quand quelqu'un clique sur:

$(function() { 
    $(".slider_link").click(function(){ 
    $("#"+$(this).attr("tag")).slideUp(300); 
    }); 
}); 

---

Une solution encore mieux serait de vous simplifier la tâche et travailler avec JS désactivé, changez votre balisage comme ceci:

<li><a href="#home" class="slider_link">Home</a></li> 
<li><a href="#calendar" class="slider_link">Calendar</a></li> 
<li><a href="#officers" class="slider_link">Officers</a></li> 
<li><a href="#media" class="slider_link">Media</a></li> 

Ensuite, vous pouvez lier votre gestionnaire click comme ceci:

$(function() { 
    $(".slider_link").click(function(e){ 
    $(this.hash).slideUp(300); 
    e.preventDefault(); //prevent page scroll 
    }); 
}); 

Cela fonctionne même si JS est désactivé, il suffit de faire défiler la page vers le <div id="home">, etc lorsque vous cliquez sur le lien correspondant.