11550 sujets

JavaScript, DOM et API Web HTML5

JQuery - live() show()

Bonjour,

...

.advanced {
  display: none;
}

...

$(document).ready(function() {
  $('#btn_advanced').click(function () {
    $('.advanced').show();
  })
  $('#btn_new').click(function () {
    $(this).after('<div><div>Simple</div><div class="advanced">Advanced</div></div>');
  });
});

...

<input type="button" id="btn_advanced" value="Advanced" />
<input type="button" id="btn_new" value="New data" />


Le bouton btn_new me permet d'ajouter des lignes.
Ces lignes contiennent une information simple par défaut
et une détaillée activable avec le bouton btn_advanced.
Quand je veux passer en mode détaillé j'aimerais n'avoir
qu'à changer la propriété display de la classe CSS advanced.
Or $('.advanced').show(); change propriété pour chaque
éléments matché. La classe advanced reste donc inchangée.
Ce qui fait que les lignes ajoutées après être "passé en
mode advanced" ne font pas apparaitre les infos détaillées.

Est-ce que je suis clair ?
Modifié par Glide (09 Dec 2009 - 16:38)
Essaye ce petit HTML je pense que tu comprendras mieux ce que je veux dire.
Clique plusieurs fois sur [New data] pour créer des lignes,
clique une fois sur [Advanced] pour afficher les détails,
et clique encore sur [New data].


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.advanced {
  display: none;
}
</style>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
  $('#btn_advanced').click(function () {
    $('.advanced').show();
  })
  $('#btn_new').click(function () {
    $(this).after('<div><div>Simple</div><div class="advanced">Advanced</div></div>');
  });
});
</script>
</head>
<body>
  <input type="button" id="btn_advanced" value="Advanced" />
  <input type="button" id="btn_new" value="New data" />
</body>
</html>
Ah OK ! Je crois que j'ai compris.

Peut-être quelque chose comme ça alors :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <title>Test jQuery</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
	var display = false; 

	function displayAdvanced() {
		(display) ? $('.advanced').show() : $('.advanced').hide();
	}

	$('#btn_advanced').click(function () { 
		display = !display;
		displayAdvanced();
	}) 

	$('#btn_new').click(function () { 
		$(this).after('<div><div>Simple<\/div><div class="advanced">Advanced<\/div><\/div>');
		displayAdvanced();
	}); 
}); 
</script> 
</head> 
<body> 
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
	<p>
		<input type="button" id="btn_advanced" value="Advanced" /> 
		<input type="button" id="btn_new" value="New data" /> 
	 </p>
</form>
</body> 
</html>

Modifié par Heyoan (09 Dec 2009 - 17:37)
Ou alors juste 
$('#btn_advanced').click(function () { 
    $('.advanced').toggle();  // hide ou show selon et ce automatiquement
  });
$('#btn_new').click(function () {  
        $(this).after('<div><div>Simple</div><div class="advanced">Advanced</div></div>'); 
        $('.advanced').toggle();
    });

Modifié par MoOx (10 Dec 2009 - 10:09)
J'étais parti sur toggle() sauf que ça ne fonctionne pas : chaque ligne ajoutée est alternativement simple / advanced. Smiley murf
Je suis parti sur une autre solution :

$(document).ready(function() { 
  $('#btn_advanced').click(function () { 
    $('.advanced').toggle(); 
  }) 
  $('#btn_new').click(function () { 
    $(this).after('<div><div>Simple</div><div class="advanced">Advanced</div></div>'); 
	$('.advanced:last-child').parent().prev().children('.advanced').is(":visible") ? $('.advanced:last-child').show() : $('.advanced:last-child').hide();
  }); 
});


en gardant le 
.advanced { 
  display: none; 
}
Merci pour vos réponses.
Finalement je me suis inspiré de Kaaviar
mais j'ai fait disparaitre le bouton advanced quand je clique dessus.
Ce qui me permet d'avoir à faire juste ca:

    if (!$('#btn_advanced').is(':visible')) {
      $('.advanced').show();
    }
Sujet clos
Aller à