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

Question

我刚刚意识到我搞砸了原来的 HTML - 图标 classes 本来不应该出现在代码上的。现在我理解了否决票——以及 javascript 的普遍草率。我已经修改了 HTML，使其成为开始的样子。

我有一个无序列表，我正在使用 jQuery 搜索它以将 class 添加到其锚标记，具体取决于 [=46] 的 text/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>

她是 jQuery 声明，应该将 "AlertSettingIcon" class 添加到警报和设置锚标记：

$("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 &amp; Settings") { 
                    $(this).addClass("AlertSettingIcon");
                } else
                    if ($( this ).innerHtml() == "Deposit a Check") {
                        $(this).addClass("RDCIcon");
                    }
                    else {
                        $(this).addClass("AlertSettingIcon");
                    }

});

当我使用开发人员工具检查分配给每个锚标记的 classes 时，class 没有被添加。我试过使用 .text()，将我的脚本包装在 CDATA 标记中，.html()，使用 /u0026 和其他几种方法，但我还没有成功添加 class到 "Alerts & Settings" 锚元素。我还在 firefox 和 Chrome 中完成了这些方法中的每一个，以确保它不是浏览器兼容性。

最后，这里是一个 JSFiddle，问题本身就在这里：https://jsfiddle.net/r7vnft5c/

谁能弄清楚为什么 AlertSettingIcon class 没有在写入 JS/jQuery 时添加，我可以做些什么来解决它？

谢谢你的想法，大卫

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 映射到 class 名称...

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

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

Ampersand in innerHtml() not being read correctly and validating in JS

javascript

string

jquery

ampersand