Question

我需要根据页面名称是否包含在数组中来隐藏一些内容，但只能使其在数组的第一项上正常工作。

我一直在使用以下代码，并且取得了一定程度的成功。

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

我希望对数组中命名的所有页面隐藏embeddedServiceHelpButton类的内容。

但是，它每次只能在数组中的第一项上正常工作，但不适用于数组中的后续项，除非我再次重新加载页面，这不理想。

我们将不胜感激。

Answer 1

很难确切地了解正在发生的事情，但是使用基于CSS的解决方案可能会更好。您需要的是对发布的代码进行修改，再加上带有CSS规则的<style>元素：

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规则，但最终这种方法应该会成功。）

为什么window.onload仅按预期在第一个数组值上起作用，而我必须重新加载页面以获取其他数组值？

1 个答案: