Jquery, vérifie si charAt() est égal à un caractère unicode?

Question

J'ai un lien pliable qui a la flèche unicode sur elle

►This is a collapsible link 

Et quand quelqu'un clique dessus, je veux qu'il soit transformé en flèche vers le bas ▼. Cependant, j'ai du mal à trouver comment analyser ce personnage.

Voici mon code:

function CollapsibleContainerTitleClickApp(){ 
    $(".collapsibleContainerContent.app", $(this).parent()).slideToggle(); 
    alert($(this).text().trim().charAt(0)); 
    if ($(this).text.trim().charAt(0) == "\u25B8"{ 
     alert("inside the if statement"); 
     $(this).text($(this).text().replace("\u25B8", "\u25BE")); 
    }else{ 
     $(this).text($(this).text().replace("\u25BE", "\u25B8")); 
} 

Maintenant, la première alerte pops toujours comme la flèche réelle (►) et l'affichage de la source a aussi la flèche réelle. Comment puis-je voir si le premier caractère est une flèche, et si oui, le remplacer par l'autre flèche? La deuxième déclaration d'alerte ne se déclenche jamais, donc elle ne passe jamais la condition de l'if.

Answer 1

Vous avez plusieurs erreurs dans votre instruction if, c'est pourquoi cette branche n'est jamais atteinte.

if ($(this).text.trim().charAt(0) == "\u25B8"{ 

Vous avez oublié la ) clôture de la déclaration if.

En outre, vous n'appelez pas la méthode text(), vous essayez d'y accéder en tant que membre, ce qui n'est pas le cas.

Votre code devrait ressembler à ceci:

if ($(this).text().trim().charAt(0) == "\u25B8") { 

Answer 2

charCodeAt(index) retourne la valeur entière unicode du caractère à l'index spécifié. C'est souvent la manière la plus simple de tester des valeurs de caractères individuelles, en particulier lorsqu'elles ne sont pas imprimables ou spéciales d'une autre manière. De plus, assurez-vous de comparer les bonnes valeurs Unicode. "\u25B8" est la « petite flèche à droite » (▸) - mais la flèche vous montriez dans votre exemple est la « grande flèche droite », qui est "\u25BA" (►)

donc ... un exemple simple en utilisant charCodeAt()et la valeur unicode correcte:

var s = "►This is a collapsible link"; 
if(s.charCodeAt(0) === 0x25BA) { 
    alert("true!"); 
} 

Answer 3

Vous pouvez résoudre cela avec css et jQuery aussi:

CSS:

.collapsible_link:before { content: "\25BC"; } 
.collapsed_link:before { content: "\25BA"; } 

jQuery:

$('#link').click(function(o) { 
    $(o).toggleClass('collapsible_link collapsed_link'); 
});