我有以下html代码：

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

每当用户单击span标签时，我都希望在向上箭头和向下箭头之间切换。

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

我的职能总是走在其他道路上。如果我使arrow变量的javacript：alert，我将得到表示为箭头的html实体。如何告诉jQuery将arrow变量解释为字符串而不是html。

解决方案

回答

查看.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();
 });

回答

也许我们没有得到完全匹配的信息，因为浏览器将实体或者其他内容的外壳放低了。尝试仅使用克拉(^)和小写的" v"进行测试。

编辑我的第一个理论是完全错误的。

回答

解析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");                           
    }
}

回答

如果我们发出"箭头"警报，它将返回什么？它是否返回我们要匹配的确切字符串？如果要获取实际的字符''？'和''？'，则可能需要将其与"" \ 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) ? "⇑" : "⇓" );
};

回答

使用一个类来表示跨度的当前状态。
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' );
} );

这可能不是最好的方法，但是应该可以。没有测试艰难