Почему window.onload работает так, как ожидалось, только для первого значения массива, и я должен перезагрузить страницу для дополнительных значений массива?

#javascript #css

Вопрос:

Мне нужно скрыть некоторый контент в зависимости от того, включено ли имя страницы в массив, но я могу заставить его правильно работать только с первым элементом в массиве.

Я работал с приведенным ниже кодом и добился некоторого успеха.

 window.onload = function () {
  var url = window.location.href;
  var string_contains = ['careers', 'accessibility', 'privacy', 'cookie-policy', 'legal', 'terms-of-business', 'sitemap',  'search'];

  for(var i =0;i < string_contains.length; i  ){
    if(url.indexOf(string_contains[i]) != -1) {
      var x = document.getElementsByClassName("embeddedServiceHelpButton");
      for(var a = 0;a<x.length;a  ) {
        x[a].style.display = 'none';
      }
    }
  }
  console.log(a);
}

Я ожидаю, что мой контент с классом of embeddedServiceHelpButton будет скрыт для всех страниц, названных в массиве.

Однако каждый раз он работает нормально только для первого элемента в массиве, но не для последующих элементов в массиве, если я не перезагружаю страницу снова, что далеко от идеала.

Любая помощь приветствуется.

1. Это не имеет смысла. Если ваш URL-адрес содержит хотя бы одну из этих строк, тогда все кнопки с этим классом на странице будут скрыты. Как только это произойдет с первой соответствующей строкой, ничего не изменится.

2. Обратите внимание, что окно может иметь только один URL-адрес одновременно.

3. Что вы подразумеваете под «это нормально работает только с первым элементом в массиве каждый раз, но не для последующих элементов в массиве, если я не перезагружу страницу снова» ? Если вы загружаете страницу, а кнопки скрыты, как и ожидалось, вам не нужно снова скрывать кнопки до следующей загрузки страницы, верно?

4. @Pointy В том-то и дело, что они скрываются только для первого значения массива, «карьеры». Когда я перехожу на другую страницу с именем в массиве, отображается кнопка, если я не перезагружаю страницу.

5. Ну, без дополнительного контекста, например, что именно вы подразумеваете под «загрузкой новой страницы», невозможно помочь дальше. Опубликованный вами код, если он включен в то, что большинство людей подразумевают под «страницей», скроет кнопки, когда браузер сообщит странице, что она закончила загрузку. Если ваши кнопки создаются каким-либо скриптом после этого момента, ваш код на них не повлияет.

Ответ №1:

Трудно точно определить, что происходит, но вам может повезти больше с решением на основе CSS. Что вам понадобится, так это модификация опубликованного вами кода плюс <style> элемент с правилом CSS:

 window.onload = function () {
  var url = window.location.href;
  var string_contains = ['careers', 'accessibility', 'privacy', 'cookie-policy', 'legal', 'terms-of-business', 'sitemap',  'search'];

  for(var i =0;i < string_contains.length; i  ){
    if(url.indexOf(string_contains[i]) != -1) {
      document.body.classList.add("hide-service-buttons");
      break;
    }
  }
  console.log(a);
}

Правило CSS:

 <style>
  body.hide-service-buttons .embeddedServiceHelpButton {
    display: none;
  }
</style>

При этом, даже если кнопки добавляются задолго до загрузки страницы, кнопки не будут отображаться. (Возможно; могут быть противоречивые правила CSS, но в конечном итоге этот подход должен быть успешным.)