JavaScript 保留关键字未正确通过函数传递

JavaScript reserved keywords not correctly being passed through function

我正在尝试构建一个页面,用户可以在该页面上标记他们访问过的地图上的城市,并将数据存储在 Firebase 上以供将来访问。我 运行 遇到的问题是 "New York" 或 "New Orleans" 等以保留关键字开头的城市。这是 运行 页面加载的功能,用于调整以前访问过的城市,以便在地图上用复选标记图像标记为已访问过。

  function adjustMarkers() {
  database.ref("users/" + uid + "/citiesVisited").once("value").then(function(userSnapshot){
    userSnap = userSnapshot.val();
    citiesArray = Object.entries(userSnap);
    for (var [cityName, visited] of citiesArray) {
        if (visited == "yes") {
            $("#" + cityName).attr("src", "assets/images/checkmark.png")
            $("#" + cityName).attr("data-clicked", "yes")
        }
    }
})

}

此功能 运行s 时,纽约、新奥尔良、华盛顿特区和洛杉矶等城市无法正确更新。我意识到我可以将这些城市名称存储在 Firebase 中,作为其他名称,如 NY、NO、DC 和 LA,以便将其正确地设置为 运行。但我非常希望将它们与它们的专有名称一起存储以用于其他显示目的。我可以在这方面使用解决方法吗?

首先post在这里,如果post违反任何规则,我深表歉意。我在 post 之前搜索了很多,但可能错过了一个类似的问题。

编辑:进一步思考,这可能与保留字根本没有任何关系,可能只是所有具有多个字的城市。如果解决方案对我来说立即显而易见,我将删除它。

问题不在于 Javascript 保留关键字 - 问题在于,如果 cityName 有空格,那么,例如,如果它是 New York:

$("#" + cityName)

将解析为

$("#New York")

这意味着:找到一个元素,其 tagName 是 "York",它是 ID 为 "New".

的元素的后代

$("#New York").text('foo');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="New">
  <York>
    ????
  </York>
</div>

任何带空格的 cityName 都不会按预期运行。

一个简单的解决方法是在 HTML 中(以及在数据库中,或者在将 cityName 传递给 $ 之前)用破折号替换所有空格,所以它解析为

$("#New-York")

如果数据库包含包含 Javascript 保留字的数据,可能 您唯一需要担心的是如果您使用 eval 或它的等价物之一 - 我认为它不应该担心,否则。