HTML エンティティと jQuery を比較する方法

Question

次の HTML コードがあります。

<h3 id="headerid"><span onclick="expandCollapse('headerid')">&uArr;</span>Header title</h3>

ユーザーがスパンタグをクリックするたびに、上矢印と下矢印を切り替えたいと考えています。

function expandCollapse(id) {   
    var arrow = $("#"+id+" span").html(); // I have tried with .text() too
    if(arrow == "⇓") {     
        $("#"+id+" span").html("⇑");               
    } else {        
        $("#"+id+" span").html("⇓");               
    }
}

私の関数は常にelseパスを通過します。javascript:alertを作成した場合 arrow 変数 矢印として表される HTML エンティティを取得しています。jQuery に解釈させるにはどうすればよいですか? arrow 変数は HTML ではなく文字列として扱われます。

Answer 1

HTML が解析されると、JQuery は DOM 内で次のように認識します。 UPWARDS DOUBLE ARROW (「⇑」)、エンティティ参照ではありません。したがって、JavaScript コードで次のことをテストする必要があります。 "⇑" または "\u21d1". 。また、切り替え先を変更する必要があります。

function expandCollapse(id) {
    var arrow = $("#"+id+" span").html();
    if(arrow == "\u21d1") {     
        $("#"+id+" span").html("\u21d3");                           
    } else {            
        $("#"+id+" span").html("\u21d1");                           
    }
}

Answer 2

のアラートを実行すると、 arrow それは何を返しますか？照合対象の正確な文字列を返しますか?実際の文字を取得している場合 '⇓' そして '⇑' と一致させる必要があるかもしれません "\u21D1" そして "\u21D3".

また、試してみるとよいかもしれません ⇑ そして ⇓ すべてのブラウザがこれらのエンティティをサポートしているわけではないためです。

アップデート:完全に機能する例を次に示します。http://jsbin.com/edogop/3/edit#html,ライブ

window.expandCollapse = function (id) {   
  var $arrowSpan = $("#" + id + " span"),
      arrowCharCode = $arrowSpan.text().charCodeAt(0);

  // 8659 is the unicode value of the html entity
  if (arrowCharCode === 8659) {
    $arrowSpan.html("⇑");                           
  } else {            
    $arrowSpan.html("⇓");                           
  }

  // one liner:
  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "⇑" : "⇓" );
};

Answer 3

クラスを使用して、スパンの現在の状態を通知します。HTML は次のようになります

<h3 id="headerId"><span class="upArrow">&uArr;</span>Header title</h3>

次に、JavaScriptで次のようにします

$( '.upArrow, .downArrow' ).click( function( span ) {
    if ( span.hasClass( 'upArrow' ) )
        span.text( "⇓" );
    else
        span.text( "⇑" );
    span.toggleClass( 'upArrow' );
    span.toggleClass( 'downArrow' );
} );

これは最良の方法ではないかもしれませんが、うまくいくはずです。厳しいテストはしなかった

Answer 4

をチェックしてください 。トグル（） 効果。

これは私が以前に遊んでいたものと似たものです。

HTML:

<div id="inplace">
<div id="myStatic">Hello World!</div>
<div id="myEdit" style="display: none">
<input id="myNewTxt" type="text" />
<input id="myOk" type="button" value="OK" />
<input id="myX" type="button" value="X" />
</div></div>

脚本：

 $("#myStatic").bind("click", function(){
      $("#myNewTxt").val($("#myStatic").text());
      $("#myStatic,#myEdit").toggle();
 });
 $("#myOk").click(function(){
      $("#myStatic").text($("#myNewTxt").val());
      $("#myStatic,#myEdit").toggle();
 });
 $("#myX").click(function(){
      $("#myStatic,#myEdit").toggle();
 });

Answer 5

ブラウザがエンティティを小文字にしているなどの理由で、完全に一致しない可能性があります。テストのためにカラット (^) と小文字の「v」を使用してみてください。

編集済み - 私の最初の理論は明らかに間違っていました。