Header title每当用户单击span标签时,我都希望在向上箭头和向下箭头之间切换。 function expandCollapse(id) { var arrow = $("#"+id+" span").html(); // I have tried with .text() too" />

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

javascript jquery html-entities

6369 观看

5回复

32908 作者的声誉

我有以下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。

作者: Sergio del Amo 的来源 发布者: 2008 年 8 月 27 日

回应 (5)


1

6673 作者的声誉

查看.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();
 });
作者: jason saldo 发布者: 27.08.2008 12:57

0

21155 作者的声誉

也许您没有得到完全匹配的信息,因为浏览器将实体或其他内容的框号降低了。尝试仅使用克拉(^)和小写的“ v”进行测试。

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

作者: Neall 发布者: 27.08.2008 12:59

17

4757 作者的声誉

决定

解析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");                           
    }
}
作者: jelovirt 发布者: 27.08.2008 01:03

3

26768 作者的声誉

如果您对arrow返回的警报进行警告?它是否返回与之匹配的确切字符串?如果您要获取实际字符'⇓',则'⇑'可能必须将其与"\u21D1"和匹配"\u21D3"

另外,您可能要尝试一下&#8657;&#8659;因为并非所有浏览器都支持这些实体。

更新:这是一个完全正常的示例: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("&#8657;");                           
  } else {            
    $arrowSpan.html("&#8659;");                           
  }

  // one liner:
  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "&#8657;" : "&#8659;" );
};
作者: travis 发布者: 27.08.2008 01:07

1

3340 作者的声誉

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

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

作者: Juan 发布者: 27.08.2008 01:10
32x32