如何将 html 实体与 jQuery 进行比较答案

【问题标题】：How to compare an html entity with jQuery如何将 html 实体与 jQuery 进行比较
【发布时间】：2010-09-06 23:57:03
【问题描述】：

我有以下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 == "&dArr;") {     
        $("#"+id+" span").html("&uArr;");               
    } else {        
        $("#"+id+" span").html("&dArr;");               
    }
}

我的函数总是走其他路径。如果我创建 arrow 变量的 javacript:alert，我将得到表示为箭头的 html 实体。我如何告诉 jQuery 将 arrow 变量解释为字符串而不是 html。

【问题讨论】：

标签： javascript jquery html-entities

【解决方案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");                           
    }
}

【讨论】：

【解决方案2】：

如果您发出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;" );
};

【讨论】：

当我查看警报窗口时，我确实看到了一个“向上箭头”。有没有关于这个话题的进一步讨论，这里的答案并没有解决我的问题，这与原始问题相同。
查看我对工作示例所做的更新。您需要使用您正在使用的确切箭头的 unicode 值更新 8657 和 8659。
Blam，这行得通。谢谢。这感觉就像一个黑客，这有什么理由这么棘手吗？顺便说一句，我对 stackoverflow 社区还很陌生，所以如果所有这些讨论不恰当并且应该转移到一个新问题上，我深表歉意。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

也许您没有得到完全匹配，因为浏览器正在小写实体或其他东西。尝试使用克拉 (^) 和小写“v”来进行测试。

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

【讨论】：