384400/ -readme.md

## -readme.md

      
    Raw
  

               -readme.md
            
          
    Comment afficher et cacher des élements en JavaScript pur ?

jQuery permet facilement de cacher ou d'afficher des éléments avec les fonctions  .hide() et  .show() : ainsi pouvons-nous cacher les éléments possédant une classe identique et afficher un élément possédant un identifiant particulier. En JavaScript pur, la fonction hide nécessite le recours à une boucle.
Par exemple, nous voulons afficher les jours de la semaine en espagnol, en français ou en anglais au clic de l'utilisateur. Si ce dernier demande l'affichage en langue française, les textes dans la langue de Cervantes ou de Shakespeare seront occultés. Si ce dernier demande ensuite l'affichage en langue espagnole, les textes dans la langue de Molière ou de Shakespeare seront occultés.
Avec jQuery, nous utiliserions une syntaxe comme...
<script>
jQuery('.days').hide();
jQuery('#french').show();
</script>
En Vanilla JavaScript, nous utilisons une boucle...
<script>
var days = document.getElementsByClassName('days'), i;
for (var i = 0; i < days.length; i++) {
  days[i].style.display = 'none';
}
document.getElementById('french').style.display = 'block';
</script>

  
## show-hide.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Comment afficher et cacher des élements en JavaScript pur ?</title>
</head>
<body>
<p><label><input type="radio" onclick="returnSpanish();">Spanish</label><p>
<p><label><input type="radio" onclick="returnFrench();">French</label><p>
<p><label><input type="radio" onclick="returnEnglish();">English</label><p>
<p id="spanish" class="days">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>
<p id="french" class="days">Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi</p>
<p id="english" class="days">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
<script>
    document.getElementById('spanish').style.display = 'none';
    document.getElementById('french').style.display = 'none';
    function returnSpanish() {
        var days = document.getElementsByClassName('days'), i;
        for (i = 0; i < days.length; i++) {
            days[i].style.display = 'none';
        }
        document.getElementById('spanish').style.display = 'block';
    }
    function returnFrench() {
        var days = document.getElementsByClassName('days'), j;
        for (j = 0; j < days.length; j++) {
            days[j].style.display = 'none';
        }
        document.getElementById('french').style.display = 'block';
    }
    function returnEnglish() {
        var days = document.getElementsByClassName('days'), k;
        for (k = 0; k < days.length; k++) {
            days[k].style.display = 'none';
        }
        document.getElementById('english').style.display = 'block';
    }
    returnSpanish();
    returnFrench();
    returnEnglish();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Comment afficher et cacher des élements en JavaScript pur ?</title>
	</head>
	<body>
	<p><label><input type="radio" onclick="returnSpanish();">Spanish</label><p>
	<p><label><input type="radio" onclick="returnFrench();">French</label><p>
	<p><label><input type="radio" onclick="returnEnglish();">English</label><p>
	<p id="spanish" class="days">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>
	<p id="french" class="days">Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi</p>
	<p id="english" class="days">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
	<script>
	document.getElementById('spanish').style.display = 'none';
	document.getElementById('french').style.display = 'none';
	function returnSpanish() {
	var days = document.getElementsByClassName('days'), i;
	for (i = 0; i < days.length; i++) {
	days[i].style.display = 'none';
	}
	document.getElementById('spanish').style.display = 'block';
	}
	function returnFrench() {
	var days = document.getElementsByClassName('days'), j;
	for (j = 0; j < days.length; j++) {
	days[j].style.display = 'none';
	}
	document.getElementById('french').style.display = 'block';
	}
	function returnEnglish() {
	var days = document.getElementsByClassName('days'), k;
	for (k = 0; k < days.length; k++) {
	days[k].style.display = 'none';
	}
	document.getElementById('english').style.display = 'block';
	}
	returnSpanish();
	returnFrench();
	returnEnglish();
	</script>
	</body>
	</html>