innerHtml() 中的 & 符号未正确读取并在 JS 中验证

Question

我刚刚意识到我搞砸了原来的 HTML - 图标类原本不应该出现在代码中。现在我理解了投票的反对 - 以及 javascript 的一般草率。我已经修改了 HTML，使其成为应有的开始。

我有一个无序列表，我正在使用 jQuery 搜索它以向其锚标记添加一个类，具体取决于列表项中链接的文本/innerHtml：

<ul class="menu-items">
<li class="menu-item icon-globe">
    <a href="/test/Mobile/Accounts.aspx" class="ui-link">Accounts</a></li>
<li class="menu-item icon-globe">
    <a href="/dupont/Mobile/Transfers.aspx" class="ui-link">Transfers</a></li>
<li class="menu-item emailMenuItem icon-globe">
    <a href="/test/Mobile/Messages.aspx" class="ui-link">Messages</a></li>
<li class="menu-item">
    <a href="/test/CustomerService.aspx" class="ui-link">Alerts &amp; Settings</a></li>
<li class="menu-item emailMenuItem icon-globe"><a href="/test/Mobile/DepositCheck.aspx" class="ui-link">Deposit a Check</a>

她是应该将“AlertSettingIcon”类添加到警报和设置锚标记的 jQuery 语句：

$("li.menu-item a.ui-link").each(function() {
    if ($( this ).innerHtml == "Accounts") {
        $(this).addClass("AccountIcon");
    } else
        if ($( this ).innerHtml == "Transfers") {
            $(this).addClass("TransferIcon");
        } else
            if ($( this ).innerHtml == "Messages") {
                $(this).addClass("MessageIcon");
            } else
                if ($( this ).innerHtml == "Alerts & Settings") { 
                    $(this).addClass("AlertSettingIcon");
                } else
                    if ($( this ).innerHtml() == "Deposit a Check") {
                        $(this).addClass("RDCIcon");
                    }
                    else {
                        $(this).addClass("AlertSettingIcon");
                    }

});

当我使用开发人员工具检查分配给每个锚标记的类时，没有添加该类。我尝试使用 .text()，将脚本包装在 CDATA 标记中，.html()，使用 /u0026 和其他几种方法，但我还没有成功地将类添加到“警报和设置”锚点元素。我还在 firefox 和 Chrome 中完成了这些方法，以确保它与浏览器不兼容。

最后，这是一个 JSFiddle，问题出现在该处：https://jsfiddle.net/r7vnft5c/

谁能弄清楚为什么在编写 JS/jQuery 时没有添加 AlertSettingIcon 类，以及我可以做些什么来修复它？

感谢您的想法， 大卫

Answer 1

.innerHTML 不是一种方法。对于 jQuery，它是 $(this).html() 或使用原生 API，它是 this.innerHTML。

并使用更合理的流控制结构，例如 switch 语句。

一般来说，.innerHTML 比较可能很敏感。当您只比较文本内容时，请改用.text()。

$("li.menu-item a.ui-link").each(function() {
    switch ($(this).text()) {
    case "Accounts":
        $(this).addClass("AccountIcon"); break;
    case "Transfers":
        $(this).addClass("TransferIcon"); break;
    case "Messages":
        $(this).addClass("MessageIcon"); break;
    case "Alerts & Settings":
         $(this).addClass("AlertSettingIcon"); break;
    case "Deposit a Check":
         $(this).addClass("RDCIcon"); break;
    default:
         $(this).addClass("AlertSettingIcon");
    }
});

---

另一种方法是将 HTML 映射到类名...

var map = {
  Accounts: "AccountIcon",
  Transfers: "TransferIcon",
  Messages: "MessageIcon",
  "Alerts & Settings": "AlertSettingsIcon",
  "Deposit a Check": "RDCIcon"
}

那就是……

$("li.menu-item a.ui-link").each(function() {
    $(this).addClass(map[$(this).text()] || "AlertSettingIcon");
});

甚至更好...

$("li.menu-item a.ui-link").addClass(function() {
    return map[$(this).text()] || "AlertSettingIcon";
});