javascript - 如何将 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("⇓");               
    }
}

我的函数总是走 else 路径。如果我创建一个 javacript:alert of 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");                           
    }
}