Code hexadecimal non traduit avec .text

**flavors** · 23/11/2015, 11h01

Bonjour.

J'ai un div recherche que j'étends ou rétracte lors de l'appuie sur une fleche ( &#9660 ).
De base le div de recherche est caché et j'ai une fléche qui pointe vers le bas. Lors de l'appuie sur la fleche, j'ai bien mon div qui s'affiche mais j'aimerai aussi que la fleche pointe vers le haut.
Je fais :

Code :

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

1
2
3
4
5
6
7
8
9
 
<h2>Recherche <span id="wrap">&#9660</span></h2>
 
<script>
 $("#wrap").click(function() {
                ($(this).text() === "&#9660") ? $(this).text="&#9650" : $(this).text="&#9660";
                $("#recherche").slideToggle("slow");
                });
</script>

Seulement au lieu de m'afficher la fleche, j'obtiens le code "&#9650"

Quelqu'un aurait une solution pour afficher l'afficher correctement?

Merci.

**NoSmoking** · 23/11/2015, 11h22

Bonjour,
et tu la sors d'où cette syntaxe

Code :

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

($(this).text() === "&#9660") ? $(this).text="&#9650" : $(this).text="&#9660";

**flavors** · 23/11/2015, 11h31

Ah oui pardon.
Comme j'ai essayé avec plusieurs façon (nottament avec "innerHTML"), je me suis embrouillé les pinceax
En fait c'est :

Code :

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

1
2
 
($(this).text() === "&#9660") ? $(this).text("&#9650") : $(this).text("&#9660");

**NoSmoking** · 23/11/2015, 11h45

Quoiqu'il arrive .test() n'interpréte pas le code hTML si tu fais $(this).text('<b>texte</b>') tu auras <b>texte</b> et non texte alors autant passer par .html() ou mieux par une classe avec .toggleClass().

Dernier point ce n'est pas &#9650 mais &#9650 ; si tu ne veux pas d'embrouille. ( nota : le ; est a recoller).

**danielhagnoul** · 23/11/2015, 11h53

Il faut tester le caractère UTF-8 '▼'

Code html :

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

<span id="wrap">▼</span>

Impossible de mettre le code dans le format correct ! Il se transforme automatiquement !

Il faut lire jObj.html() == '▼'

Code :

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

1
2
3
4
5
6
7
8
9
$( "#wrap" ).on( "click", function(){
  var jObj = $( this );
 
  if ( jObj.html() == '▼' ) {
    jObj.html( '▲' );
  } else {
    jObj.html( '▼' );
  }
});

**flavors** · 23/11/2015, 12h46

Merci pour vos réponses.
@NoSmoking : quand vous parlez d'utiliser toggleClass, vous voulez dire avoir 2 classes avec une fleche differente chacune que j'affiche ou que je cache?

@danielhagnoul :
j'ai repris votre 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
 
<h2>Recherche <span id="wrap">▼</span></h2>
 
<script>
$( "#wrap" ).on( "click", function(){
  var jObj = $( this );
 
  if ( jObj.html() == '▼' ) {
    jObj.html( '▲' );
  } else {
    jObj.html( '▼' );
  }
});
</script>

mais ça ne change pas la fleche.
Par contre si je fais

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$( "#wrap" ).on( "click", function(){
  var jObj = $( this );
 
  if ( jObj.html() == '▼' ) {
    jObj.html( '▼' );
  } else {
    jObj.html( '▲' );
  }
});

La la fleche change de sens au 1er clic mais pas aux suivants.
C'est peut-être parce que jObj.html() ne lit pas '▼' correctement? ( la condition "jObj.html() == '▼' " n'etant pas vérifiée)

**NoSmoking** · 23/11/2015, 15h48

vous voulez dire avoir 2 classes avec une fleche differente chacune que j'affiche ou que je cache?

effectivement en utilsant le CSS suivant par exemple

Code css :

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

1
2
3
4
5
6
h2.expand:after{
  content:'\0025BC';
}
h2.collapse:after{
  content:'\0025B2';
}

ce qui donne le script

Code :

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

1
2
3
4
5
$(".open").on('click', function() {
    $(this)
      .toggleClass('expand collapse')
      .next().slideToggle("slow");
});

exemple complet pour test :

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>toggleClass</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
h2.open {
  cursor:pointer;
}
h2.expand:after{
  content:'\0025BC';
}
h2.collapse:after{
  content:'\0025B2';
}
h2.open + p{
  display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
</script>
</head>
<body>
<div id="main">
  <h2 class="expand open">Recherche</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio. Etiam non euismod tortor. Phasellus venenatis bibendum lectus, tempor sollicitudin mauris pretium in. Etiam non ex vitae dui fermentum sodales sed id orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin id consectetur enim, et tempor nulla. Pellentesque vitae accumsan nulla, ut blandit nisl. Aliquam justo erat, sollicitudin nec facilisis non, faucibus aliquam ante. Nunc luctus ligula eget justo mattis consequat.</p>
  <h2 class="expand open">Recherche</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio. Etiam non euismod tortor. Phasellus venenatis bibendum lectus, tempor sollicitudin mauris pretium in. Etiam non ex vitae dui fermentum sodales sed id orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin id consectetur enim, et tempor nulla. Pellentesque vitae accumsan nulla, ut blandit nisl. Aliquam justo erat, sollicitudin nec facilisis non, faucibus aliquam ante. Nunc luctus ligula eget justo mattis consequat.</p>
</div>
<script>
$(".open").on('click', function() {
    $(this)
      .toggleClass('expand collapse')
      .next().slideToggle("slow");
});
</script>
</body>
</html>

**flavors** · 23/11/2015, 16h07

Merci beaucoup pour l'exemple.

J'aurai juste une question.
Vous aviez dis "... ou mieux par une classe avec .toggleClass()." mais en quoi cette solution est-elle meilleure?
Est-ce le fait que l'on utilise pas de condition?

**NoSmoking** · 23/11/2015, 16h12

Simplement pourquoi faire en javascript ce que le CSS gère parfaitement, de plus si demain tu veux changer le symbol, pour mettre un ☰ par exemple, tu n'auras pas à modifier du code javascript qui n'est à priori pas concerné par de la mise en forme.

Mais bon les avis sont partagés là dessus.

**flavors** · 23/11/2015, 16h26

D'accord.
Merci pour l'explication.

Bonne journée!

**danielhagnoul** · 23/11/2015, 20h28

Envoyé par flavors

@danielhagnoul : j'ai repris votre code mais ça ne change pas la fleche.

J'ai testé ce code avant de le donner et je viens de vérifier, cela fonctionne très bien chez moi. Bien entendu, ma page web est en UTF-8.

La solution CSS est préférable.

**flavors** · 24/11/2015, 08h40

Je ne comprends pas.
Pourtant je fais bien

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<h2>Recherche <span id="wrap">▼</span></h2>
 
<script>
$( "#wrap" ).on( "click", function(){
  var jObj = $( this );
 
  if ( jObj.html() == '▼' ) {
    jObj.html( '▲' );
  } else {
    jObj.html( '▼' );
  }
});
</script>

pour l'utf-8 il suffit d'avoir cette ligne dans le <head> non?

Code :

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

1
2
 
<meta charset="utf-8" />

**SpaceFrog** · 24/11/2015, 11h05

non le fichier lui même doit aussi etre en utf8 ...
http://cahnory.tumblr.com/post/17108...%C3%A7a-marche

**flavors** · 25/11/2015, 10h18

J'utilise l’éditeur de texte Gedit, apparemment il est configuré en UTF-8 de base.
Mais si le fichier n'est pas en UTF-8, je ne devrais pas voir les fleches comme ça :▼ mais seulement leurs code hexa?

**SpaceFrog** · 25/11/2015, 11h55

Essaye ça:

Code :

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

1
2
3
4
5
function entityForSymbolInContainer(selector) {
    var code = $(selector).text().charCodeAt(0);        
    return "&#" + code + ";";
}
$('#code').text(entityForSymbolInContainer("#symbol"));

**flavors** · 25/11/2015, 14h20

Merci de prendre le temps d'essayer de me faire comprendre =).
J'ai fais :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<p id="code"> <span id="symbol">▼</span> </p>
 
<script>
function entityForSymbolInContainer(selector) {
    var code = $(selector).text().charCodeAt(0);        
    return "&#" + code + ";";
}
$('#code').text(entityForSymbolInContainer("#symbol"));
</script>

et j'obtiens : ▼

Le but est de faire l'opération inverse si j'ai bien compris. On prends la flèche et on voit comment elle se traduit?
Ici on a bien le bon code.

C'est ça ?

**SpaceFrog** · 25/11/2015, 14h25

Je récupère le code hexa du caractère et je l'affiche
http://fiddle.jshell.net/gtuc7mr8/

**flavors** · 25/11/2015, 14h31

Oui pardon, je récupère bien le code hexa (il a été traduit dans le post).
Du coup ça veut dire que je suis bien en UTF-8?

**SpaceFrog** · 25/11/2015, 15h01

pas forcément ...
ça veut dire que tu récupère bien le code du caractère

**flavors** · 25/11/2015, 15h17

Mais c'est ça que je ne comprends pas. Le code que j'utilise est un code UTF-8, si ma page traduit et affiche bien le symbole. Cela veut dire que mon fichier est encodé en UTF-8? Sinon il n'afficherait que le code?

Code hexadecimal non traduit avec .text

jQuery

Discussions similaires

Partager

Partager