Question

我想在url包含特定字符串时隐藏一些div。

例如，我有这个隐藏第一个div的代码：

   <div id="ficha">Hello</div>
   <div id="ficha">world</div>
   <div id="ficha">...</div>

   <script>
      if (/info|mapo/.test(window.location.href)) {
        document.getElementById('ficha').style.display = 'none';
        }
   </script>

网址：

www.example.com/all ------＆gt;不要隐藏div

www.example.com/info -----＆GT;隐藏div

www.example.com/mapo ---＆GT;隐藏div

脚本的第一个问题是它只隐藏了第一个div表示Hello，但我想隐藏所有的div。所以，我认为有必要做一个循环...¿我怎么能这样做？
第二件事是运行两个不同的脚本来根据url字符串内容隐藏不同的div。

也许这可以通过制作一个else函数来实现。如果在加载页面之后执行它，那么它总是必要的循环，甚至更好。

例如：

   <div id="ficha">Hello</div>
   <div id="ficha">Hello2</div>
   <div id="ficha2">world</div>
   <div id="ficha2">...</div>

   <!-- First script hides divs with id="ficha" if url string has "info" or "mapo" -->
   <script>
      if (/info|mapo/.test(window.location.href)) {
        document.getElementById('ficha').style.display = 'none';
        }
   </script>

   <!-- Second script hides divs with id="ficha2" if url string has "all" -->
   <script>
      if (/all/.test(window.location.href)) {
        document.getElementById('ficha2').style.display = 'none';
        }
   </script>

代码将在Moodle的Database Activity中执行。

提前致谢。

Answer 1

此脚本可以帮助您。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () { //The function to execute when the page is loaded
    var string_contain = ''; //Set this as your string
    var url = window.location.href;
    if(url.indexOf(string_contain) >= 0) { //If url contains then...
        var x = document.getElementsByClassName("your_class"); //Create an array that contains your divs with your_class class
        for(var a = 0;a<x.length;a++) { //Do some stuff for each value of the array
            x[a].style.display = 'none';
        }
    }
}
</script>
</head>
<body>
<div class="your_class"></div>
</body>
</html>

请记住，ID只与一个元素相关联，因此如果您尝试访问多个元素，它将无效。

Answer 2

你在这里遇到了一些问题：

首先，与评论中提到的用户adeneo一样，您无法共享ID。但是，可以共享类，因此您可能希望<div>个元素说class="ficha"。

其次，您希望隐藏或显示基于URL中字符串的div，但您的URL由唯一路径组成。当你应该以不同方式构建页面时，你正试图隐藏div。除非有更多信息需要添加此信息。

www.example.com/mapo，至少在您提供的表示中，是与www.example.com/info不同的HTML页面，所以为什么不将它们构建为单独的页面而不是通过不必要的逻辑来显示和隐藏<div>元素？

第三个问题：你不需要for循环，就像for-each循环一样。第一个问题将指导您如何选择具有指定类的所有元素：
JavaScript get elements by class name and tag name
然后使用您从上述信息中选择的阵列，您可以使用Javascript Documentation for using forEach on arrays更改您的元素＆＃39;可视性。

Answer 3

由于它不是唯一的，因此CSS类更合适。这样的事情应该有效：

    function hideItemsByClass(className){
        var matchedItems = document.getElementsByClassName(className);
        for(var i = 0; i < matchedItems.length; i++){
            matchedItems[i].style.display = 'none';
        }
    }

如果URL包含此字符串，则隐藏具有此类/ id的所有div（循环脚本）

3 个答案: