Jquery，检查charAt（）是否等于unicode字符？

Question

I've got a collapsible link which has the unicode arrow on it

►This is a collapsible link

And when someone clicks on it I want it to be turned into the down arrow ▼. However I am having trouble figuring out how to parse to replace this character.

Here is my 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"));
}

Now the first alert always pops up as the actual arrow (►) and viewing the source also has the actual arrow. How can I see if the first character is one arrow, and if so replace it with the other arrow? The second alert statement never fires so it's never passing the condition of the if.

Answer 1

You have multiple errors in your if statement, this is why that branch is never hit.

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

You forgot the closing ) of the if statement.

Also, you're not invoking the text() method, you're trying to access it as a member, which it isn't.

Your code should look like this:

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

Answer 2

You can solve this with css and jQuery, too:

CSS:

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

jQuery:

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

Answer 3

charCodeAt(index) returns the integer unicode value of the character at the specified index. This is often the easiest way to test individual char values -- especially when they're non-printable, or special in some other way. (docs at w3schools)

Also... be sure you're comparing the correct unicode values. "\▸" is the "small right arrow" ( ▸ ) -- but the arrow you showed in your example is the "large right arrow", which is "\►" ( ► )

so... a simple example using charCodeAt() and the correct unicode value:

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