Il y a actuellement 211 visiteurs
Mercredi 24 Avril 2024
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Changer fonction Javascript en jQuery

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...
Répondre

Changer fonction Javascript en jQuery

Message le 23 Avr 2013 22:47

Bonjour,

Je suis un peu débutant en programmation mais très curieux, alors vous comprendrez ma faute...

J'ai voulu faire une espèce de navigation par section et sous-section en Javascript, et j'ai fini par trouver cette super solution :

Code: Tout sélectionner
<html>

<head>


<script type="text/javascript" language="javascript">

<!--

function desafficher(classe)
{
var tab_class = document.getElementsByClassName(classe);
for (var i=0;i<tab_class.length;i++) {
tab_class.style.display="none";
}
}

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">
<a onclick="desafficher('sec');afficher('1.1.1');">1.1.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.1.2');">1.1.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.1.3');">1.1.3</a>
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.2.1');">1.2.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.2.2');">1.2.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.2.3');">1.2.3</a>
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.3.1');">1.3.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.3.2');">1.3.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.3.3');">1.3.3</a>
</div>

</div>

</div>






<div id="chap2">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.1.1');">2.1.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.1.2');">2.1.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.1.3');">2.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.2.1');">2.2.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.2.2');">2.2.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.2.3');">2.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.3.1');">2.3.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.3.2');">2.3.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.3.3');">2.3.3
</div>

</div>

</div>





<div id="chap3">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.1.1');">3.1.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.1.2');">3.1.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.1.3');">3.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.2.1');">3.2.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.2.2');">3.2.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.2.3');">3.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.3.1');">3.3.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.3.2');">3.3.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');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>




Mais bien sûr, car il y a toujours un Mais, le GetElementByClassName n'est pas pris en charge par Internet Explorer. Impensable, donc. Dommage, j'avais adopté cette solution pour cette partie de mon site et même toutes les autres! À chaque fois qu'on cliquait sur quelque chose, c'était "désafficher:sec (autrement dit tout)" et afficher:ça! C'était merveilleux!

Quelqu'un pourrait me montrer à quoi pourrait ressembler ce code avec jQuery? Je suis très peu familier...

Merci!
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 
Haut

Re: Changer fonction Javascript en jQuery

Message le 23 Avr 2013 23:39

Hello,

Pour info, les liens ne fonctionnent pas, il ne seront pas détéctés par les navigateurs si il n'y a pas de href à l'intérieur...
Avatar de l'utilisateur
H3bus
Moderateur
Moderateur
 
Messages: 12195
Inscription: 08 Avr 2008 15:13
Localisation: /home/h3bus
 
Haut

Re: Changer fonction Javascript en jQuery

Message le 23 Mai 2013 00:29

Ben j'avais exactement la même page avant mais tout en javascript et ça fonctionnait, même si ce n'était pas des liens...

Regarde, à la place de ma fonction jQuery, j'avais cette fonction en javascript :

Code: Tout sélectionner
function desafficher(classe)
{
var tab_class = document.getElementsByClassName(classe);
for (var i=0;i<tab_class.length;i++) {
tab_class[i].style.display="none";
}
}




Est-ce que tu veux dire qu'en jQuery c'est différent et ce serait plus susceptible de fonctionner si c'était des liens?
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 
Haut

Re: Changer fonction Javascript en jQuery

Message le 24 Mai 2013 15:13

Très facile avec jQuery:

Code: Tout sélectionner
function desafficher(classe)
{
$('.' + classe).hide();
}

function afficher(id)
{
$('.' + classe).show();
}


Presque pas besoin de mettre ça dans des fonctions du coup. ;)

Pour info, effectivement, jQuery a été créé pour compenser le manque de cohérence entre les navigateurs. Tous les navigateurs "moderne" supportent getElementsByClassName.
http://caniuse.com/#feat=getelementsbyclassname
alicelieutier
Visiteur
Visiteur
 
Messages: 5
Inscription: 24 Mai 2013 15:02
 
Haut

Re: Changer fonction Javascript en jQuery

Message le 26 Mai 2013 19:06

Merci alicelieutier, c'est très simple et très différent de ce que j'ai eu comme réponse jusqu'ici!

Par contre je dois avoir des problèmes avec la syntaxe... quitte à avoir l'air de te faire travailler pour moi, peux-tu me dire si selon ton exemple le code doit être mis ensemble comme ça, étant donné qu'il est un peu inhabituel pour moi?

Code: Tout sélectionner
<html>

<head>


<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>

$(document).ready(function desafficher(classe)
{
$('.' + classe).hide();
};

});

function afficher(id)
{
$('.' + classe).show();
}



</script>



</head>

<body>


<div id="boutons" style="position:absolute; left:20px;">


<div id="chap1">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.1.1');">1.1.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.1.2');">1.1.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.1.3');">1.1.3</a>
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.2.1');">1.2.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.2.2');">1.2.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.2.3');">1.2.3</a>
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.3.1');">1.3.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.3.2');">1.3.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.3.3');">1.3.3</a>
</div>

</div>

</div>






<div id="chap2">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.1.1');">2.1.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.1.2');">2.1.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.1.3');">2.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.2.1');">2.2.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.2.2');">2.2.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.2.3');">2.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.3.1');">2.3.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.3.2');">2.3.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.3.3');">2.3.3
</div>

</div>

</div>





<div id="chap3">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.1.1');">3.1.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.1.2');">3.1.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.1.3');">3.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.2.1');">3.2.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.2.2');">3.2.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.2.3');">3.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.3.1');">3.3.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.3.2');">3.3.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');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>


Merci à toi, ou encore à quiconque voit ce qui ne fonctionne pas!
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 
Haut

Re: Changer fonction Javascript en jQuery

Message le 31 Mai 2013 17:45

Finalement j'ai trouvé quelque chose qui correspond à mes besoins.

Voilà :

Code: Tout sélectionner
<!DOCTYPE html>
<head>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
   <script>
       head.js("http://code.jquery.com/jquery-2.0.0.min.js",
         function(){
 
            $( function(){
 
               $("button", "#boutons").on("click", function(){
                  $( "div[id^='ID']" ).hide();
<!--Cacher toutes les DIV qui contiennent ID-->
                  $( "#ID" + $( this ).attr('id') ).show();
<!--Montrer la DIV qui s'appelle ID plus (le id du bouton)-->
               });
             });
          }
      );
   </script>

</head>


<body>
      <div id="boutons">
         <button id="111">111</button>
         <button id="112">112</button>
         <button id="113">113</button>
      </div>
      <div id="texte">
         <div id="ID111">
            <p>1.1.1</p>
         </div>
         <div id="ID112">
            <p>1.1.2</p>
         </div>
         <div id="ID113">
            <p>1.1.3</p>
         </div>
      </div>
 
   
</body>
</html>


Merci à tous!
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 
Haut
Répondre

Sujets similaires

Message fonction bac à sable (sandbox)
Salut tout le monde Je viens d'installer en passant par mon UEFI la fonction bac à sable de Windows donc (sandbox). Pour le moment cette fonction reste assez floue pour moi .....Est-ce que cela me sera utile ? peut-on par exemple svp y tester des logiciels sans risques pour vérifier avant de les ...
Réponses: 4

Message [Réglé] changer de carte graphique
bonjour a vous tous et, toutes j'aimerai pouvoir changé de carte graphique pour quelque chose de mieux en terme de jeux , et je ne sais pas ce qu on peu mettre ma configurationprocesseur AMD Ryzen 3200GE - Radeon Vega 8carte graphique AMD Radeon Vega Graphiqueram 16 godisque dur 1tomerci
Réponses: 12

Message [Réglé] bug de la fonction double clic
Bonjour il arrive parfois que lorsque je veux lancer un programme (par un double clic), quel qu'il soit, j'ai la fenêtre propriétés qui s'ouvre. Je dois alors redémarrer le pc pour que tout rentre dans l'ordre. Avez vous une idée d’où ça peut venir svp ? Merci.
Réponses: 4

Message Changer de carte graphique
Bonjour,Pourriez-vous m'indiquer un modèle carte graphique abordable car je souhaiterai changer mon ancienne qui est une "Nvidia Gtx 460" qui date de 2011 qui est sur mon pc avec un processeur i7 et 12 go de ram.MerciCordialement
Réponses: 23

Message Résolu - Skype sur Windows 10 : A JavaScript error occurred
Re,,Excuse moi tout à l'heure j'ai eu droit à une urgence ordinatoresque, mon frère m'a amené un PC a améliorer donc voir le coût à envisager et commander les pièces. Quand c'est pour la famille ou une association c'est toujours urgent, nous c'est de famille assister les gens moi par le net et l'aid ...
Réponses: 9

Message Fonction si+recherche dans un tableau
Bonjour, j'ai un tableau, dans ce tableau une colonne pour des articles et une colonne pour le type d'article. La seconde a deux données : "fruit" et "légume". Dans la première, chaque article est détaillé : "pomme", "orange", "carotte", "épinar ...
Réponses: 3

Message Changer le dns
Bonjour Est-ce que c'est bien utile de modifier le DNS pour plus de rapidité ?https://1.1.1.1/fr/Merci
Réponses: 20

Haut

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités

Forum Informatique aide pour le matériel sous Windows, Linux, Logiciels et Jeux Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

.: Nous contacter :: Flux RSS :: Données personnelles :.