Bonjour,
J'ai de la difficulté à créer une fonction jQuery qui me permettrait de désafficher tous les éléments d'une classe. Ça peut paraître rudimentaire, mais pour l'instant j'ai pas mal de difficulté à maîtriser jQuery, alors ça ne l'est pas pour moi.
Je vous montre une version (très) simplifiée de mon site pour vous simplifier la tâche de m'aider. Voilà, j'avais commencé par faire ce site avec ma fonction en question en Javascript, ce qui fonctionnait parfaitement!
Mais hélas, Internet Explorer ne prend pas en charge le getElementsByClassName. Est-il possible de refaire cette fonction en jQuery? Je pressens que oui, mais j'ai besoin de votre aide parce que la mienne ne fonctionne pas. Voici donc la version simplifiée de la page que je voudrais faire, qui ne fonctionne pas :
Alors Quand on clique sur une section (1.3.2 par exemple), ça devrait afficher le texte correspondant à droite. Si vous remplacez la fonction jQuery erronée par ma fonction Javascript, ça marche. Les chiffres sur lesquels on clique apparaissent à droite. Mais avec ma fonction jQuery, ça ne marche pas.
Alors, s'il vous plaît, quelle est mon erreur? Pouvez-vous corriger mon code?
Je suis débutant et j'ai besoin de pas mal d'assistance, alors si vous pouviez faire votre propre version de ma fonction corrigée, ce serait apprécié!
Merci beaucoup![/i]
Modifié par 6l20 (11 May 2013 - 11:08)
J'ai de la difficulté à créer une fonction jQuery qui me permettrait de désafficher tous les éléments d'une classe. Ça peut paraître rudimentaire, mais pour l'instant j'ai pas mal de difficulté à maîtriser jQuery, alors ça ne l'est pas pour moi.
Je vous montre une version (très) simplifiée de mon site pour vous simplifier la tâche de m'aider. Voilà, j'avais commencé par faire ce site avec ma fonction en question en Javascript, ce qui fonctionnait parfaitement!
function desafficher(classe)
{
var tab_class = document.getElementsByClassName(classe);
for (var i=0;i<tab_class.length;i++) {
tab_class[i].style.display="none";
}
}Mais hélas, Internet Explorer ne prend pas en charge le getElementsByClassName. Est-il possible de refaire cette fonction en jQuery? Je pressens que oui, mais j'ai besoin de votre aide parce que la mienne ne fonctionne pas. Voici donc la version simplifiée de la page que je voudrais faire, qui ne fonctionne pas :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$(".bouton").click(function() {
$(".sec").css('display', 'none');
});
});
</script>
<script type="text/javascript" language="javascript">
<!--
function afficher(id)
{
document.getElementById(id).style.display="block";
}
//-->
</script>
</head>
<body>
<div id="boutons" style="position:absolute; left:20px;">
<div id="chap1">
<div id="part1">
<div id="sec1" class="bouton">
<a onclick="afficher('1.1.1');">1.1.1</a>
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('1.1.2');">1.1.2</a>
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('1.1.3');">1.1.3</a>
</div>
</div>
<div id="part2">
<div id="sec1" class="bouton">
<a onclick="afficher('1.2.1');">1.2.1</a>
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('1.2.2');">1.2.2</a>
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('1.2.3');">1.2.3</a>
</div>
</div>
<div id="part3">
<div id="sec1" class="bouton">
<a onclick="afficher('1.3.1');">1.3.1</a>
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('1.3.2');">1.3.2</a>
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('1.3.3');">1.3.3</a>
</div>
</div>
</div>
<div id="chap2">
<div id="part1">
<div id="sec1" class="bouton">
<a onclick="afficher('2.1.1');">2.1.1
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('2.1.2');">2.1.2
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('2.1.3');">2.1.3
</div>
</div>
<div id="part2">
<div id="sec1" class="bouton">
<a onclick="afficher('2.2.1');">2.2.1
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('2.2.2');">2.2.2
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('2.2.3');">2.2.3
</div>
</div>
<div id="part3">
<div id="sec1" class="bouton">
<a onclick="afficher('2.3.1');">2.3.1
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('2.3.2');">2.3.2
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('2.3.3');">2.3.3
</div>
</div>
</div>
<div id="chap3">
<div id="part1">
<div id="sec1" class="bouton">
<a onclick="afficher('3.1.1');">3.1.1
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('3.1.2');">3.1.2
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('3.1.3');">3.1.3
</div>
</div>
<div id="part2">
<div id="sec1" class="bouton">
<a onclick="afficher('3.2.1');">3.2.1
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('3.2.2');">3.2.2
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('3.2.3');">3.2.3
</div>
</div>
<div id="part3">
<div id="sec1" class="bouton">
<a onclick="afficher('3.3.1');">3.3.1
</div>
<div id="sec2" class="bouton">
<a onclick="afficher('3.3.2');">3.3.2
</div>
<div id="sec3" class="bouton">
<a onclick="afficher('3.3.3');">3.3.3
</div>
</div>
</div>
</div>
<div id="texte" style="position:absolute; left:80px;">
<div>
<div>
<div id="1.1.1" class="sec">
1.1.1
</div>
<div id="1.1.2" class="sec">
1.1.2
</div>
<div id="1.1.3" class="sec">
1.1.3
</div>
</div>
<div>
<div id="1.2.1" class="sec">
1.2.1
</div>
<div id="1.2.2" class="sec">
1.2.2
</div>
<div id="1.2.3" class="sec">
1.2.3
</div>
</div>
<div>
<div id="1.3.1" class="sec">
1.3.1
</div>
<div id="1.3.2" class="sec">
1.3.2
</div>
<div id="1.3.3" class="sec">
1.3.3
</div>
</div>
</div>
<div>
<div>
<div id="2.1.1" class="sec">
2.1.1
</div>
<div id="2.1.2" class="sec">
2.1.2
</div>
<div id="2.1.3" class="sec">
2.1.3
</div>
</div>
<div>
<div id="2.2.1" class="sec">
2.2.1
</div>
<div id="2.2.2" class="sec">
2.2.2
</div>
<div id="2.2.3" class="sec">
2.2.3
</div>
</div>
<div>
<div id="2.3.1" class="sec">
2.3.1
</div>
<div id="2.3.2" class="sec">
2.3.2
</div>
<div id="2.3.3" class="sec">
2.3.3
</div>
</div>
</div>
<div>
<div>
<div id="3.1.1" class="sec">
3.1.1
</div>
<div id="3.1.2" class="sec">
3.1.2
</div>
<div id="3.1.3" class="sec">
3.1.3
</div>
</div>
<div>
<div id="3.2.1" class="sec">
3.2.1
</div>
<div id="3.2.2" class="sec">
3.2.2
</div>
<div id="3.2.3" class="sec">
3.2.3
</div>
</div>
<div>
<div id="3.3.1" class="sec">
3.3.1
</div>
<div id="3.3.2" class="sec">
3.3.2
</div>
<div id="3.3.3" class="sec">
3.3.3
</div>
</div>
</div>
</div>
</body>
</html>Alors Quand on clique sur une section (1.3.2 par exemple), ça devrait afficher le texte correspondant à droite. Si vous remplacez la fonction jQuery erronée par ma fonction Javascript, ça marche. Les chiffres sur lesquels on clique apparaissent à droite. Mais avec ma fonction jQuery, ça ne marche pas.
Alors, s'il vous plaît, quelle est mon erreur? Pouvez-vous corriger mon code?
Je suis débutant et j'ai besoin de pas mal d'assistance, alors si vous pouviez faire votre propre version de ma fonction corrigée, ce serait apprécié!
Merci beaucoup![/i]
Modifié par 6l20 (11 May 2013 - 11:08)
