Discussion :

[flavors]

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]

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]

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]

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]

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]

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)