Appliquer deux traitements contraires à l'événement Click

**Cid1230** · 02/03/2020, 16h47

Bonjour,
J'essaie d'apprendre JQuery petit à petit avec le livre ( "Simplifiez vos développements Javascript avec JQuery" de Michel Martin),
mais je bute sur un problème depuis plusieurs jours.
J'ai beau tout essayer, rien ne marche.
Est-ce que vous voulez bien ne serait-ce que me donner une piste pour avancer s'il vous plait?

Je vous explique mon souci.
Disons que nous avons deux images.
La première partie de mon objectif est de transformer la première image de mon lien en la deuxième grâce à l'événement Click.
La deuxième partie de mon objectif est de faire l'inverse, c'est à dire qu'au deuxième clic de souris, la deuxième image soit retransformée en la première.
Mon code réussit à faire la première partie mais malheureusement pas la deuxième.

Voici mon

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="Modulo.css">
 
   <title>Modulo, le site web modulable</title>   
 
 
</head>
<body>
 
    <header>
        <a href="#" id="Logo"><img src="" alt="Logo du site" title ="Vers l'accueil"/></a>
        <p></p>
        <nav></nav>
    </header>
 
    <div id="bloccentral">
 
 
        <div id="element_parent">
 
 
 
             <div id="barregauche">
 
            <p>Le menu :<br />
            - premier tiret<br />
            - deuxième tiret<br />
            - troisième tiret<br />
            - etc</p>
 
          <a href="#" id="Lien1"><img src="bouton_ouvrir.png" id="imagedulien1"/></a>
 
             </div>
 
         </div>
 
    </div>
 
 
    <section id="sectioncentre">
        <a href="#" id="ouvrir">Le lien</a>
    </section>
 
    <section id="barredroite">
 
    </section>  
 
 
    <footer id="pieddepage">
 
    </footer>
 
    <script src="jquery.js"></script>
    <script src="mon-script-jquery.js"></script>
</body>
</html>

Il n'y a quasiment rien dedans, donc je vous redonne la seule petite partie concernée ici :

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
<div id="element_parent">
 
 
         <div id="barregauche">
 
            <p>Le menu :<br />
            - premier tiret<br />
            - deuxième tiret<br />
            - troisième tiret<br />
            - etc</p> 
 
          <a href="#" id="Lien1"><img src="bouton_ouvrir.png" id="imagedulien1"/></a>
 
         </div>
 
</div>

Ici le code CSS concerné :

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
body
{
    background-image: url("Fond_bureau_2080x1300_5.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    color : #2637ad;
    font-family: "Comic Sans Ms";
    font-size: 20px;
}
 
#barregauche 
{
    width: 280px;
    height: 450px;
    background: #6B9A49; 
    color: #fff;
    position: absolute;
    left: -300px; 
    top: 0px;
}    
 
 
 
#Lien1
 
{
    background: 5d5d5d;
    color: #fff;
    text-decoration: none;
    position: absolute;
    right: -88px;
    top: 150px;
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);         
    transform: rotate(270deg);
    border-radius: 0 0 8px 8px;
}

Et pour finir ma tentative de 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
$(document).ready(function(){
 
    $("#Lien1").on('click', function() { 
 
    if ($('[src*="bouton_ouvrir.png"]'))
 
    $("#imagedulien1").attr('src','bouton_fermer.png');
 
    if ($('[src*="bouton_fermer.png"]'))
 
     $("#imagedulien1").attr('src','bouton_ouvrir.png');
    });
 
});

Merci beaucoup à vous.

**Toufik83** · 03/03/2020, 16h35

Salut,

Il fallait seulement mettre des conditions correctes :(il y a plusieurs moyens aussi...)

Code :

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

1
2
3
4
5
6
 
if ($(this).find("[src='bouton_ouvrir.png']").length)
	$("#imagedulien1").attr('src','bouton_fermer.png');
else if ($(this).find("[src='bouton_fermer.png']").length)
        $("#imagedulien1").attr('src','bouton_ouvrir.png');
});

Ou bien utiliser attr() :

Code :

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

1
2
3
4
5
6
 
if ($(this).find("#imagedulien1").attr('src')=='bouton_ouvrir.png')
	$("#imagedulien1").attr('src','bouton_fermer.png');
else if ($(this).find("#imagedulien1").attr('src')=='bouton_fermer.png')
	$("#imagedulien1").attr('src','bouton_ouvrir.png');
});

Invité · 03/03/2020, 17h22

Bonjour,

Une solution :

Code html :

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

1
2
3
<a href="#" class="toggle">
  <img src="bouton_ouvrir.png" data-src="bouton_fermer.png" alt="ouvrir/fermer"/>
</a>

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 
  $('.toggle img').on('click', function(e){
    e.preventDefault();
    let src1 = $(this).attr('src');
    let src2 = $(this).data('src');
    // on inverse
    $(this).attr('src',src2);
    $(this).data('src',src1);
  });
 
})

**Cid1230** · 04/03/2020, 14h45

Super ! Merci beaucoup à tous les deux ça fonctionne

Donc si je comprends bien, ma première erreur a été de ne pas utiliser this.

Est-ce que this doit systématiquement être utilisé pour qu'une fonction puisse bien fonctionner?

Et Toufik83, à quoi sert la méthode .length dans ton code?

Bravo à vous encore.

Invité · 04/03/2020, 14h59

Bonjour,

il faut apprendre à faire une recherche personnelle !

JavaScript vanilla :

jQuery :

$(this) (idem this)
.length

Pour faire simple :

Code :

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

1
2
3
4
5
$('.toggle img').on('click', function(e){
...
    let src1 = $(this).attr('src');
...
  });

$('.toggle img').on('click'....) : au clic sur une image (contenue dans un élément de classe "toggle")
$(this) représente ici l'image cliquée.

**Cid1230** · 04/03/2020, 17h00

Bonjour jreaux62,

d'accord je vais continuer à en apprendre sur le JQuery en consultant les livres et cours de ce site,

parce qu'il me semble que j'ai encore beaucoup de choses à apprendre...

Bonne journée/soirée à vous !

Appliquer deux traitements contraires à l'événement Click

jQuery

Discussions similaires

Partager

Partager