11

私は次の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 == "&dArr;") {     
        $("#"+id+" span").html("&uArr;");               
    } else {        
        $("#"+id+" span").html("&dArr;");               
    }
}

私の関数は常にelseパスを使用しています。変数のjavacript：alertを作成するとarrow、htmlエンティティが矢印として表されます。arrow変数をhtmlではなく文字列として解釈するようにjQueryに指示するにはどうすればよいですか 。

4

5 に答える 5

17

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");                           
    }
}
于 2008-08-27T13:03:20.977 に答える
3

アラートを実行すると、arrow何が返されますか? 照合している正確な文字列を返しますか? 実際の文字'⇓'を取得している場合は、および と'⇑'照合する必要がある場合があります。"\u21D1""\u21D3"

また、すべてのブラウザがこれらのエンティティをサポートしているわけではないため、試し&#8657;てみることをお勧めします。&#8659;

更新: これは完全に機能する例です: http://jsbin.com/edogop/3/edit#html,live

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("&#8657;");                           
  } else {            
    $arrowSpan.html("&#8659;");                           
  }

  // one liner:
  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "&#8657;" : "&#8659;" );
};
于 2008-08-27T13:07:58.297 に答える
1

.toggle（）効果を確認してください。

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

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();
 });
于 2008-08-27T12:57:15.810 に答える
1

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

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

次に、JavaScriptで行います

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

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

于 2008-08-27T13:10:06.747 に答える
0

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

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

于 2008-08-27T12:59:46.337 に答える