Problèmes avec show hide jquery

J'essaie d'obtenir show hide pour travailler sur plusieurs objets mais je n'arrive pas à le faire fonctionner. Toute aide serait bien appréciée ... Je suis perdu sur la façon de le faire. Si je fais seulement un show hide cela fonctionne bien mais plus d'un ça ne fonctionne pas correctement.Problèmes avec show hide jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Show Hide Sample</title> 
<script src="js/jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#content1').hide(); 
    $('a').click(function(){ 
$('#content1').show('slow'); 

}); 

$('a#close').click(function(){ 
     $('#content1').hide('slow'); 
}) 

}); 
</script> 

    <style> 
body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF} 
#content1{ 
border:1px solid #DDDDDD; 
padding:10px; 
margin-top:5px; 
width:300px; 
} 
</style> 

</head> 

<body> 

<a href="#" id="click">Test 1</a> 
<div class="box"> 
<div id="content1"> 
<h1 align="center">Hide 1</h1> 

<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> 




<p><a href="#" id="close">Close</a></p> 
</div> 
</div> 


<a href="#" id="click">Test 2</a> 
<div class="box"> 
<div id="content1"> 
<h1 align="center">Hide 2</h1> 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> 

<p><a href="#" id="close">Close</a></p> 
</div> 
</div> 


</body> 
</html>

Source

2010-05-02 Michael

Vous utilisez des ID en double pour vos ancres de fermeture. Utilisez la classe .close au lieu et de modifier votre sélection pour ressembler à:

$('a.close').click(function(){ 
    $('#content1').hide('slow'); 
}); 

<a href="#" class="close">Close</a>

... et ne pas utiliser des ID en double, jamais jamais.

Source

2010-05-02 01:24:34 karim79

Je pense que je comprends ... – Michael

Ce bloc:

$('a').click(function(){ 
    $('#content1').show('slow'); 
});

dit que chaque fois que les ancres est cliqué, montrer l'élément avec l'ID de content1. Vous définissez ensuite une ancre avec un ID de "close", que vous définissez un gestionnaire pour fermer l'élément. Cela provoque un conflit car c'est aussi une ancre. Puisque l'élément de fermeture est une ancre avec l'ID de "close", que voulez-vous qu'il fasse? Appelez show() parce que c'est une ancre ou appelez hide() parce qu'il a un ID de "close"?

Source

2010-05-02 01:27:26 BradBrening

Merci pour l'explication ... Honnêtement, je n'y ai pas pensé. – Michael

Vous avez besoin d'une combinaison des autres réponses, plus un peu plus, changer votre balisage pour utiliser des classes au lieu d'ID en double comme ceci:

<a href="#" class="click">Test 2</a> 
<div class="box"> 
<div class="content"> 
<h1 align="center">Hide 1</h1> 

<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> 

<p><a href="#" class="close">Close</a></p> 
</div> 
</div>

et réglez vos gestionnaires de clic pour fonctionner sur les classes et être par rapport, comme ceci:

$('a.click').click(function(){ 
    $(this).next('.box').children('.content').show('slow'); 
}); 
$('a.close').click(function(){ 
    $(this).closest('.content').hide('slow'); 
});

Ces clic gestionnaires ne pointent plus à un individu ID ou classe, mais plutôt fonctionner sur les classes, par rapport à la liaison actuelle. L'ancre .click ouvre le div suivant .content en utilisant .next() et .children(), et le lien .close cache le .content div il est en utilisant .closest(), tous relatifs.

Source

2010-05-02 01:31:45

Problèmes avec show hide jquery

Répondre

Questions connexes