Зарезервированные ключевые слова JavaScript неправильно передаются через функцию

Question

Я пытаюсь создать страницу, на которой пользователь может отмечать города на карте, которую он посетил, сохраняя данные в Firebase для будущих посещений. Проблема, с которой я столкнулся, связана с такими городами, как «Нью-Йорк» или «Новый Орлеан», которые начинаются с зарезервированных ключевых слов. Эта функция запускается при загрузке страницы, чтобы настроить ранее посещенные города, которые будут отмечены на карте как посещенные с изображением галочки.

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

}

Когда эта функция запускается, такие города, как Нью-Йорк, Новый Орлеан, Вашингтон и Лос-Анджелес, обновляются неправильно. Я понимаю, что могу хранить эти названия городов в Firebase как другие названия, такие как NY, NO, DC и LA, чтобы это работало правильно. Но я бы очень хотел сохранить их с собственными именами для других целей отображения. Есть ли обходной путь, который я могу использовать на этой стороне вещей?

Первый пост здесь, я прошу прощения, если этот пост нарушает какие-либо правила. Я искал изрядное количество, прежде чем опубликовать это, но, возможно, пропустил аналогичный предыдущий вопрос.

Редактировать: Если подумать дальше, это может вообще не иметь никакого отношения к зарезервированным словам, а может быть просто во всех городах, в которых есть несколько слов. Я удалю это, если решение станет немедленно очевидным для меня.

Answer 1

Проблема не в зарезервированных ключевых словах Javascript, а в том, что если у cityName есть пробелы, то, например, если это New York:

$("#" + cityName)

разрешит до

$("#New York")

, что означает: найти элемент, у которого tagName - "Йорк", который является потомком элемента с идентификатором "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 или один из его эквивалентов - это не должно Думаю, мне никогда не о чем беспокоиться.