Lire PLus__Lire Moins__Traduction jQuery en Javascript Pur

**Shadow750** · 18/04/2020, 20h26

Bonjour, Bonsoir, Messieurs, Mesdames,

J'ai un petit souci de conversion d'un code jQuery en Pur Javascript via une video youtube (= pour ma pratique perso) :

Voici le code HTML :

Code HTML :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="MultipleReadMoreReadLess.css">
    <title>Multiple Read More_Read Less Button With Javascript</title>
</head>
 
<body>
    <h1>Multiple Read More_Read Less Button With Javascript</h1>
 
    <section>
        <div class="post">
            <h2>Post title 01</h2>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </span>
            <button class="read">Read more</button>
        </div>
 
        <div class="post">
            <h2>Post title 02</h2>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </span>
            <button class="read">Read more</button>
        </div>
 
        <div class="post">
            <h2>Post title 03</h2>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </span>
            <button class="read">Read more</button>
        </div>
    </section>
 
    <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
    <script src="MultipleReadMoreReadLess.js"></script>
</body>
 
</html>

Voici le code CSS :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    background-color: #2a85e3;
    padding: 0;
    margin: 25px;
    margin-top: 50px;
}
 
section {
    padding: 20px;
}
 
.post {
    color: #e5e5e5;
    text-align: justify;
    font-size: 20px;
    line-height: 25px;
    font-family: sans-serif;
}
.post:not(:last-child) {
    margin-bottom: 30px;
}
h1 {
    margin: 0 0 15px 0;
    color: #ff0066;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
}
 
.more {
    display: none;
}
 
button {
    display: block;
    background-color: #ff0066;
    color: #fff;
    border: none;
    outline: none;
    font-size: 30px;
    /* padding: Haut-Bas px Left-Right px */
    padding: 5px 20px;
    text-transform: full-width;
}

Voici le code jQuery :

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
// Code jQuery
$(document).ready(function() {
    $('.read').click(function() {
        // prev() = .previousElementSibling
        //toggle() = show or hide elements
        $(this).prev().toggle();
        console.log($(this).prev());
        // .siblings = get children de chaque element 
        $(this).siblings('.dots').toggle();
        console.log($(this).siblings('.dots'));
 
        if ($(this).text() === 'Read more') {
            $(this).text('Read less');
        } else {
            $(this).text('Read more');
        }
    })
})

Je précise que ces trois codes proviennent de la video youtube d'en haut .

J'ai voulu convertir le code jQuery en code Pur Javascript MAIS le display NE MARCHE PAS alors que dans la console, il m'affiche bien le display

Voici le code Pur 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
15
16
17
18
19
20
const read = document.querySelectorAll('.read');
const more = document.querySelectorAll('.more');
 
for (let i = 0; i < read.length; i++) {
    read[i].addEventListener('click', function() {
        this.previousElementSibling;
        console.log('\n')
        console.log(this.previousElementSibling);
 
        if (this.innerHTML === 'Read more') {
            this.previousElementSibling.display = 'inline';
            console.log(this.previousElementSibling.display);
            this.innerHTML = 'Read less';
        } else {
            this.previousElementSibling.display = 'none';
            console.log(this.previousElementSibling.display);
            this.innerHTML = 'Read more';
        }    
    })
}

DONC, je me répéte un peu, je voudrais afficher le texte caché avec Javascript traduit à partir du code jQuery, lorsque l'on clique sur "Read more" merci

**melka one** · 18/04/2020, 22h07

jour

il manque le mot style

Code :

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

this.previousElementSibling.style.display = 'inline';

**Shadow750** · 19/04/2020, 19h12

Merci melka one

J'ai mal regardé mon code

Lire PLusLire MoinsTraduction jQuery en Javascript Pur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager