logo标签列表

如何使用jQuery比较HTML实体

javascriptjqueryhtml-entities
11

我有以下的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;");               
    }
}

我的函数总是进入else路径。如果我使用arrow变量进行javascript：alert操作，则会获取表示为箭头的html实体。如何告诉jQuery将arrow变量解释为字符串而不是HTML？

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");                           
    }
}
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;" );
};
当我查看警告窗口时，我确实看到了单个的“向上箭头”。关于这个话题是否有进一步的讨论？这里的答案没有解决我的问题，这与原始问题相同。 - wuliwong
请查看我所做的带有可工作示例的更新。您需要使用确切箭头的Unicode值来更新8657和8659。 - travis
好的，成功了。谢谢。这感觉像是一个hack，这么棘手的原因是什么？顺便说一下，我还是StackOverflow社区的新手，如果所有这些讨论都不合适，应该将其移动到一个新问题中，请见谅。 - wuliwong
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();
 });
1
使用一个类来表示 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' );
} );

这可能不是最好的方法，但应该可以工作。虽然没有测试过。

0
也许你没有得到精确匹配是因为浏览器将实体转换为小写或其他原因。尝试使用插入符号 (^) 和小写字母 "v" 进行测试。
编辑 - 我的第一个理论是错误的。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接