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

Question

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

我的功能始终是其他路径.如果我做一个javacript:arrow变量的警告我得到的html实体表示为箭头.我如何告诉jQuery将arrow变量解释 为字符串而不是html.

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