Discussion :

[Xzave]

Bonjour à tous,

voici mon script qui fonctionne sur la page web: https://cesmeglise.org/lectures-du-jour/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}
function vrai () {
	var dots =	document.getElementsByClassName('brp-paragraph')[0];
     if (dots.style.display === "none") {
    dots.style.display = "inline"; 
  } else {
    dots.style.display = "none";
  }
}
 
document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'brp-passage')) {
        alert('brp-passage');
vrai()
    }
 
}, false);

Voici ce que je souhaite savoir:

j'aimerais que l'alerte 'brp-passage' ne soit pas sur tous les sélecteurs 'brp-passage',
c'est-à-dire par exemple document.getElementsByClassName('brp-paragraph')[0] ne prends que la première occurence de la classe 'brp-paragraph'

comment ne sélectionner que la première occurrence de la classe "brp-passage"

autrement dit: je ne sais pas où placer [0] dans le code ?



Xzave

[SpaceFrog]

ben comme tu l'a fait dans ton exemple ...
sinon passe par querySlector

[Toufik83]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if(document.querySelectorAll(".brp-passage")[0]===e.target){
  //c'est le premier élément
}
//ou bien 
if(document.querySelector(".brp-passage")===e.target){
  //c le premier élément
}

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.querySelector(".brp-passage")

Te retournera le premier element avec la class .brp-passage

querySelectorAll quand à lui te retournera une collection dont le premier élement sera le [0] comme a montré Toufik
ou avec item():

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelectorAll(".brp-passage").item(0)

[Xzave]

...

Réponse rapide merci mille fois. Elle fonctionne à merveille.

Je laisse le post ouvert pour la suite des évenements.



Xzave

[Xzave]

Bonjour,

je me permets ici de mettre mon code définitif afin de partager mes recherches:

voici le code Pure Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function vrai (i) {
	var ouvrirfermer =	document.getElementsByClassName('brp-paragraph')[i];
	ouvrirfermer.style.display = "inline"; 
	ouvrirfermer.style.position = "static";
}
var i,dots;
dots =	document.getElementsByClassName('brp-paragraph');
document.addEventListener('click', function (e) {
	for (i=0; i<dots.length; i++){
    if(document.querySelectorAll(".brp-paragraph")[i]===e.target) {
vrai(i);
    }
 }
}, false);

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.brp-paragraph{
position:relative;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3; 
-webkit-box-orient: vertical;
}
 
.brp-paragraph::after {
display: block;
font-weight: bold;
content: "...Lire plus";
position: absolute;
bottom: 0;
right: 0;
background: white;
text-decoration: underline;
color: #a03737;
cursor:pointer;
}

(le plugin s'appelle "Bible Reading Plans" dans Wordpress)

Le résultat est sur la même URL qu'en début de Post,

merci pour votre aide,



Xzave