innerHtml(）中的Ampersand未正确读取并在JS中进行验证

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

本文关键字：JS 验证 读取 中的 Ampersand innerHtml      更新时间：2023-09-26

我刚刚意识到我把原来的HTML搞砸了——图标类本来就不应该出现在代码中。现在我理解了否决权，以及javascript的一般草率。我已经修改了HTML，使它成为一开始应该有的样子。

我有一个无序的列表，我正在用jQuery搜索它，以将一个类添加到它的锚标记中，这取决于列表项中链接的text/inerHtml:

<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"类添加到Alerts&设置锚点标签：

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

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

最后，这里有一个JSFiddle，其中显示了问题：https://jsfiddle.net/r7vnft5c/

有人能理解为什么在编写JS/jQuery时没有添加AlertSettingIcon类，以及我能做些什么来修复它吗？

谢谢你的想法，David

.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";
});
相关文章：