jQueryを使用して、テキストがhtmlの特殊文字と等しいかどうかを確認します。

Question

私はHTMLの特殊文字を持っています。チェックボックスのようにオンとオフを切り替える必要があります。この例では、それは星です：は、★と記入することができます。

クリックすると星の状態を確認したいと思います。

$(".action_table_star").click(function() { 
    if ($(this).html() == "★") { 
     $(this).html("☆"); 
     $(this).css('color', 'white'); 
    } else { 
     $(this).html("★"); 
     $(this).css('color', 'rgb(255,165,0)'); 
    } 
}); 

これはしかし理由は$（この）の.htmlを（動作しない）は、 "&＃9733" に等しいことはありません。このif文をどのように書き直して、htmlの特殊文字をデコードして「状態」をチェックしているのでしょうか？

Answer 1

SpYk3HHの提案を改善するには、文書に両方の星を追加することでアプローチします.1つはdisplay:noneで、もう1つはjQueryを使用して両方を切り替えますクリックで

さらに、jQueryの代わりに各星をCSSで個別にスタイルすることができるという利点があります。

HTML：

<div class="action_star"> 
    <span class="star1">&#9733;</span> 
    <span style="display:none" class="star2">&#9734;</span> 
</div> 

JS：

$('.action_star').click(function() { 
    $(this).find('.star1,.star2').toggle(); 
}); 

http://jsfiddle.net/cfjT5/1/

より少ないコード、より明確に、より読みやすく、はるかに良いです。

Answer 2

そうのように、私の提案は、文字に依存しないだろうが、クラスが追加され、代わりに削除：

$(".action_table_star").click(function(e) { 
    if ($(this).hasClass("star-checked")) { 
     $(this).css('color', 'rgb(255,165,0)').text("☆"); 
    } 
    else { 
     $(this).css('color', '#fff').text("★"); 
    }; 
    $(this).toggleClass("star-checked"); 
}) 

See Demo jsFiddle HERE

Answer 3

これは

escape($(this).html()) == "%u2605" 

%u2605を動作するようです満たされた星のシンボルがエスケープされています。

Answer 4

代わり.html()を使用する、\uxxxx配列、又はString.fromCharCode()と一緒に.text()を使用します。 \uxxxx法を用いる場合

$(".action_table_star").click(function() { 
    if ($(this).text() == String.fromCharCode(9733)) { 
     $(this).html("☆"); 
     $(this).css('color', 'white'); 
    } else { 
     $(this).html("★"); 
     $(this).css('color', 'rgb(255,165,0)'); 
    } 
}); 

、あなたはベース-16 1に、ベース10の数値CHARCODEを変換する必要があります。例（コンソールの場合）：

(9734).toString(16); 
// Returns 2606. Now, paste `"\u2606"` in your code 

4桁の数字を得るには十分な詰め込みを忘れないようにしてください。

Answer 5

いいえ、$(this).html()は決して同じ★、それはます等しい★

http://jsfiddle.net/hJdg4/1/

$(".action_table_star").click(function() { 
    if ($(this).html() == "★") { 
     $(this).html("☆"); 
     $(this).css('color', 'green'); 
    } else { 
     $(this).html("★"); 
     $(this).css('color', 'rgb(255,165,0)'); 
    } 
}); 

Answer 6

あなたは== $（この）は.text（）を試してみました '★'