Bug bizarre avec jquery

**erehcab** · 16/04/2009, 23h16

Bonsoir à tous,

Je masque une partie d'un texte contenu dans une balise p via jquery et j'ajoute à l'intérieur de cette même balise p à la suite du texte tronqué un contenu dans un span " plus de détail ". Lorsque l'on clique dessus la partie tronqué du texte se ré affiche. Ensuite j'ajoute en plus de la partie tronqué un texte contenu dans un span " retour " qui devrait en toute logique me faire revenir au début de l'opération. Mais là mystère, le texte " retour " se met bien dans le span au bout du texte mais lorsque je clique dessus rien ne se passe...

Je vous montre mon code qui n'est pas bien complexe au passage :

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
21
22
23
24
25
26
 
$(document).ready( function () {
	var tabMasque = new Array();
	var i = 1;
        //Scan dans ma page toutes les balises p qui devront être tronqué
	$(".entry > .masque").each(function() {
                //Je résupère le contenu originale et le stocke dans un tableau déclaré en variable globale pour pouvoir le réutilisé par la suite.
		tabMasque[i] = $("p#"+$(this).attr("id")).html();
                //Je tronque le texte cotenu dans p via substr et j'ajoute mon texte " plus de detail "
		$(this).html($(this).text().substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
		i++;
	});
        //Lorsque l'on clique sur le texte plus de détail on affiche la totalité du texte contenu au départ dans la balise p concerné.
	$(".plus_detail").click(function() {
                //Je vide le contenu de la variable pour éviter des petits bugs.
		$("p#"+$(this).attr("id")+".masque").html("");
		  //J'ajoute un lien retour pour revenir à l'état précédent, le texte tronqué.
                $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")]+" <span class=\"back\" id=\""+$(this).attr("id")+"\">< retour></span>");
	});	
        //Lorsque l'on clique sur le texte " retour " on revien à l'état précédent.
	$(".back").click(function() {
		$("p#"+$(this).attr("id")+".masque").html("");
                //Je retronque mon texte
                $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")].substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
	});	
});

Je suis vraiment à l'arrêt avec ce bug (ou erreur de ma part). J'espère que quelqu'un pourra me donner un petit coup de pouce !

**kaen25** · 17/04/2009, 17h13

Si j'ai bien compris :

Code :

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

<p>Je suis du texte<span> et la suite est caché</span></p>

Pourquoi ne pas faire simplement

Code :

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

1
2
3
4
5
6
<p>Je suis du texte 
   <span class="detail">[Plus de détail]</span>
   <span class="cacher"> et la suite est caché 
      <span class="retour">[Retour]</span>
   </span>
</p>

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
$(document).ready( function () {
 
var index=0;
 
   $('.detail').click(function(){
      $(this).css('display','none');
      index = $('.detail').index(this);
      $('.cacher:eq('+index+')').css('display','block');
   });
 
   $('.retour').click(function(){
      index = $('.retour').index(this);
      $('.cacher:eq('+index+')').css('display','none');
      $('.detail:eq('+index+')').css('display','block');
   });
 
});

A la base le css est du genre :

Code :

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

.cacher {display:none;}

J'ai fait ca de tête donc il risque d'y avoir peut être un bug mais dans l'esprit c'est moins compliqué.
L'avantage c'est que je ne touche pas au HTML je le cache ou je le montre.

**erehcab** · 17/04/2009, 18h31

Merci de ta réponse. Le problème de ta solution c'est que je suis obligé de partir avec une zone paragraphe (p) de ce type :

Code :

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

<p class="masque">du texte ...</p>

et d'y ajouter ensuite les éléments pour afficher et masquer le texte. L'idée c'est que via tiny mce l'utilisateur est juste à définir une classe à sa zone paragraphe pour générer cet effet.

**erehcab** · 17/04/2009, 19h31

Pour info je me suis rendu compte qu'en mettant le block de code censé ramener le texte à son premier état (tronqué) à l'intérieur du bloc qui affiche l'intégralité du texte, ça fonctionne 1 fois ...

exemple :

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
21
22
23
24
25
26
27
 
$(document).ready( function () {
	var tabMasque = new Array();
	var i = 1;
        //Scan dans ma page toutes les balises p qui devront être tronqué
	$(".entry > .masque").each(function() {
                //Je résupère le contenu originale et le stocke dans un tableau déclaré en variable globale pour pouvoir le réutilisé par la suite.
		tabMasque[i] = $("p#"+$(this).attr("id")).html();
                //Je tronque le texte cotenu dans p via substr et j'ajoute mon texte " plus de detail "
		$(this).html($(this).text().substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
		i++;
	});
        //Lorsque l'on clique sur le texte plus de détail on affiche la totalité du texte contenu au départ dans la balise p concerné.
	$(".plus_detail").click(function() {
                //Je vide le contenu de la variable pour éviter des petits bugs.
		$("p#"+$(this).attr("id")+".masque").html("");
		  //J'ajoute un lien retour pour revenir à l'état précédent, le texte tronqué.
                   $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")]+" <span class=\"back\" id=\""+$(this).attr("id")+"\">< retour></span>");
        //Lorsque l'on clique sur le texte " retour " on revien à l'état précédent.
	$(".back").click(function() {
		$("p#"+$(this).attr("id")+".masque").html("");
                //Je retronque mon texte
                $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")].substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
	});
	});	
 
});

**danielhagnoul** · 17/04/2009, 21h33

Bonsoir.

Voici un exemple de code :

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Efface moi !</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#conteneur p {
            margin-bottom:12px;
        }
        div#affiche {
            margin:12px;
            border:1px solid red;
        }
        .plus_detail, .back {
            color:#0000FF;
            text-decoration:underline;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            var tabMasqueArray = [];
            var strPlusDeDetails = " plus de détails.";
            var strRetour = " retour.";
 
            $("p.masque").each(function(i, item) {
                var pHTML = $(item).html();
                var pSliceHTML = pHTML.slice(0, 60);
 
                tabMasqueArray[i] = [pHTML, pSliceHTML];
 
                $(item).empty();
                $(item).html(pSliceHTML + "<span class='plus_detail' numero='" + i + "'>" + strPlusDeDetails + "</span>");
            });
 
            $("span.plus_detail").live("click", function() {
                var i = $(this).attr("numero");
                var para = $(this).parent("p");
 
                $(para).empty();
                $(para).html(tabMasqueArray[i][0] + "<span class='back' numero='" + i + "'>" + strRetour + "</span>");
 
                return false;
            });    
 
            $("span.back").live("click", function(){
                var i = $(this).attr("numero");
                var para = $(this).parent("p");
 
                $(para).empty();
                $(para).html(tabMasqueArray[i][1] + "<span class='plus_detail' numero='" + i + "'>" + strPlusDeDetails + "</span>");
 
                return false;
            });
         });
    </script>
</head>
<body>
    <div id="conteneur" class="entry">
        <p class="masque" id="pID1">
            Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée.
        </p>
        <p>Paragraphe normal.</p>
        <p class="masque" id="pID2">
            Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée.
        </p>
        <div id="affiche"></div>
    </div>
</body>
</html>

Lorsque l'on veut interagir avec un élément créé par le script il faut utiliser live !

**erehcab** · 17/04/2009, 22h34

live

Dommage que tu sois en Belgique je t'aurai bien offert une bonne bière pour fêter ça !!!

Merci beaucoup danielhagnoul, tu m'enlèves une grosse épine du pied.

Je commençais à me douter qu'il y avait une histoire comme ça mais je ne trouvais rien dans les docs ...

**danielhagnoul** · 18/04/2009, 16h29

Bonsoir erehcab, je viens de la boire à ta santé, merci !

Prendre quelquefois du temps sur mes loisirs pour vous répondre est un plaisir. Recevoir un mot sympa motive pour aider quelqu'un d'autre.

**erehcab** · 22/04/2009, 22h28

Bonne rencontre au hasard d'un post sur developpez.net

. Ca donne envie de continuer à nourrir les forums.

Bug bizarre avec jquery

jQuery

Discussions similaires

Partager

Partager