Code hexadecimal non traduit avec .text

Version imprimable

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:

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.

23/11/2015, 11h22
NoSmoking

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

Code:

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

:koi:
23/11/2015, 11h31
flavors
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:

1 2 ($(this).text() === "&#9660") ? $(this).text("&#9650") : $(this).text("&#9660");
23/11/2015, 11h45
NoSmoking

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).
23/11/2015, 11h53
danielhagnoul
Il faut tester le caractère UTF-8 '▼'

Code:

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

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

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

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

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:

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:

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)

Citation:

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:

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

ce qui donne le script

Code:

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

exemple complet pour test :

Code:

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>

23/11/2015, 16h07
flavors

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?
23/11/2015, 16h12
NoSmoking

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.
23/11/2015, 16h26
flavors

D'accord.
Merci pour l'explication.

Bonne journée!
23/11/2015, 20h28
danielhagnoul

Citation:

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.

Je ne comprends pas.
Pourtant je fais bien

Code:

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:

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

24/11/2015, 11h05
SpaceFrog

non le fichier lui même doit aussi etre en utf8 ...
http://cahnory.tumblr.com/post/17108...%C3%A7a-marche
25/11/2015, 10h18
flavors

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?

Essaye ça:

Code:

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

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

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 ?

25/11/2015, 14h25
SpaceFrog

Je récupère le code hexa du caractère et je l'affiche
http://fiddle.jshell.net/gtuc7mr8/
25/11/2015, 14h31
flavors

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?
25/11/2015, 15h01
SpaceFrog

pas forcément ...
ça veut dire que tu récupère bien le code du caractère
25/11/2015, 15h17
flavors

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?
25/11/2015, 15h19
SpaceFrog

Sais tu au moins ce que tu cherches à faire ?... :koi:
25/11/2015, 16h16
flavors

Je pense...
La cause de l'ouverture du topic a été résolue avec la méthode en CSS.
Une autre solution m'a été proposé mais je n'arrive pas à la faire fonctionné.
Il a été avancé que cela était peut-être dû à un non-encodage en UTF-8 de mon fichier.
Je cherche donc à comprendre pourquoi cela ne marche pas ><