Il y a actuellement 78 visiteurs
Vendredi 30 Juillet 2021
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 ...

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
 


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...
En cas de problème constaté sur un sujet, contactez un modérateur par MP. N'intervenez pas vous-même. Merci bien.
Aucune aide ni support ne sera fourni par MP.
Avatar de l'utilisateur
H3bus
Moderateur
Moderateur
 
Messages: 12195
Inscription: 08 Avr 2008 15:13
Localisation: /home/h3bus
 

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
 

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
 

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
 

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
 



Sujets similaires

Message Comment changer la source d'un disque
Bonjour,j'ai récemment installé Google Drive pour le boulot et toutes les données s'enregistrent sur mon disque C: au lieu de s'enregistrer sur mon disque D: (spécial pour le stockage).Comment faire pour changer ça ?Merci d'avance.
Réponses: 1

Message Changer icône d'un fichier
Bonjour.Je me demandais s'il est possible de changer l’icône d'un fichier via un programme ou autre, mais sans en faire de raccourci.À ma connaissance ça n'est pas possible mais je suis pas expert du domaine non plus...Merci 'avance.
Réponses: 1

Message [Réglé] Acer aspire 5315 - pile bios à changer
Saluttout est dans le titrecomment change t'on cette pile sachant que les extrémités des bornes sont comme soudéesy a t'il un moyen de la remplacer en soitc'est quoi le modèle de la pile aussi ?et autre questionest ce que le portable veut fonctionner si pas cette batterieje sais que si absente : pas ...
Réponses: 14

Message [Réglé] Edge: Impossible de changer moteur de recherche Bing
Bonjour J'ai un pc portable avec Windows 10. Lorsque il sort du mode veille, edge se lance automatiquement.. J'ai vu sur internet que certains ont réglé le problème en changeant le moteur de recherche Bing par un autre mais je n'arrive pas le changer. Par défaut Bing est sélectionné et les boutons s ...
Réponses: 10

Message Responsive : Changer la position de l'image de fond
Bonjour, sur un site que je développe, j'ai une image de fond qui est située au centre lorsque le site s'affiche sur un écran d'ordinateur. Seulement, pour le moment, en affichage mobile, l'image ne bouge pas et du texte vient la recouvrir (ce qui cache l'image et rend le texte illisible). J'aimerai ...
Réponses: 0

Message Nouveau GPU , impossible de changer résolution [Résolu]
Bonjour, hier j'ai installé mon GPU à savoir une MSI 5700XT , le soucis c'est que je n'arrive pas à changer la résolution car tous les options sont grisé , je resté bloqué à 640x480 , la carte graphique est bien reconnue dans le gestionnaire des tâches.Je suis connecté avec un ancien cable HDMI.Une ...
Réponses: 7

Message Changer de refroidissement ?
Bonjour, ça vaut le coup de changer mon WC Cooler Master Seidon 120M par un Noctua NH-D15 ?J’utilise le WC depuis 4 ans pour information qui actuellement refroidit mon i7-8700k.
Réponses: 2


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


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