SCRIPT JS SELON ID D’UN ARTICLE WP

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
JulieV
Messages : 4
Enregistré le : 14 janv. 2020, 08:18

SCRIPT JS SELON ID D’UN ARTICLE WP

Message par JulieV » 14 janv. 2020, 08:20

Bonjour,

Comme le titre du sujet l’indique, j’ai intégré dans le fichier header.php de mon site WordPress un script js pour effectuer une action hide/show.

Problématique : n’étant pas une experte js, j’ai intégré l’ID de l’article dans chaque script (ce qui n’est pas très dynamique et viable).

Quelqu’un aurait-il le morceau de code qui va bien ?

Merci d’avance.

Code : Tout sélectionner

[code]<script>
$(function(){
$('article#4006 .affiche-clic').hide()
$('article#4006 .moins').hide()
$('article#4006 .triangle-code-moins').hide()
});
$(function(){
$('article#4006 div.infos-offres a.clic-plus').click(function(){
$('article#4006 div.infos-offres div.affiche-clic').show()
$('article#4006 .moins').show()
$('article#4006 .plus').hide()
$('article#4006 .triangle-code').hide()
$('article#4006 .triangle-code-moins').show()
});
});
$(function(){
$('article#4006 div.infos-offres a.clic-moins').click(function(){
$('article#4006 div.infos-offres div.affiche-clic').hide()
$('article#4006 .plus').show()
$('article#4006 .triangle-code').show()
$('article#4006 .triangle-code-moins').hide()
$('article#4006 a.clic-moins').hide()
});
});
$(function(){
$('article#4006 .triangle-code-moins').click(function(){
$('article#4006 div.infos-offres div.affiche-clic').hide()
$('article#4006 .plus').show()
$('article#4006 .triangle-code').show()
$('article#4006 .triangle-code-moins').hide()
$('article#4006 a.clic-moins').hide()
});
});
</script>

Avatar du membre
webmaster
Administrateur du site
Messages : 256
Enregistré le : 28 févr. 2017, 15:19

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par webmaster » 14 janv. 2020, 11:41

Bonjour

Il faut utiliser la concaténation de chaine en récupérant le ID de l'article WP
Je ferai donc :
$('article#'+id+' .affiche-clic').hide()

avec la définition de id en début de code
var id=get_the_ID();
Je ne connais pas word press et il faut sans doute chercher la bonne fonction
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

JulieV
Messages : 4
Enregistré le : 14 janv. 2020, 08:18

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par JulieV » 14 janv. 2020, 13:55

Merci, je vais tester. Je te tiens au courant.

JulieV
Messages : 4
Enregistré le : 14 janv. 2020, 08:18

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par JulieV » 27 janv. 2020, 13:00

J'ai testé ta solution, cela fonctionne mais la difficulté est finalement que mon morceau code est dans le fichier header.php (et non sur un template). 
Je cherche donc le même type de formule qui stocke tous les id des articles pour qu'ensuite, je puisse appliquer mon js à chaque id indépendamment... 

Des idées ?

Avatar du membre
webmaster
Administrateur du site
Messages : 256
Enregistré le : 28 févr. 2017, 15:19

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par webmaster » 27 janv. 2020, 15:28

J'ajouterai dans le template d'un article une classe dédiée sur le div article#ID
Ainsi, le sélecteur jquery serait indépendant de l'ID et valable pour toutes les pages articles
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

JulieV
Messages : 4
Enregistré le : 14 janv. 2020, 08:18

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par JulieV » 14 févr. 2020, 10:31

Merci.

Le script est effectivement le même pour tous les articles mais ceux-ci étant tous sur la même page, ta solution (qui était mon code initial) ne fonctionne pas : ainsi au clic, ce sont tous les articles qui s'ouvrent (et j'aimerais qu'ils s'ouvrent indépendamment les uns des autres...)

Avatar du membre
webmaster
Administrateur du site
Messages : 256
Enregistré le : 28 févr. 2017, 15:19

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par webmaster » 14 févr. 2020, 12:06

Bonjour

J'aimerai bien voir la page en réel pour me faire une meilleure idée.
Par MP si nécessaire.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Avatar du membre
webmaster
Administrateur du site
Messages : 256
Enregistré le : 28 févr. 2017, 15:19

Re: SCRIPT JS SELON ID D’UN ARTICLE WP

Message par webmaster » 05 mars 2020, 14:10

Une solution pour traiter un élément qui suit un autre élément c'est d'utiliser nextSibling.
Ainsi, même sans connaitre son ID, on peut le manipuler par sa position dans le code source
J'ai fait un exemple sur la fiche TJS
https://www.toutjavascript.com/referenc ... ibling.php
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre