Question

    <script>
        var toggleVisibility = function(element) {
        if(element.style.display=='block'){element.style.display='none';}
        else {element.style.display='block';}
        };
    </script>

我从另一个网站和我的div中获得了这个代码，它应该从display：none更改为显示：当点击某些内容时阻止，不能使用来自css的severel div id：/

我在我的div中得到了这个，应该点击以使其他div可见：

    <div id="profile_button_box" onclick="toggleVisibility(document.getElementById('testt'))">

我读到这只能有一个ID，但是如何修改代码以便只需点击一下即可处理severel div？

Answer 1

命名一个类并尝试这样..

<div id="profile_button_box" class="profileButton">

在 JavaScript

中

window.onload = function() {
    var buttons = document.getElementsByClassName('profileButton');
    for(var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        button.onclick = function(element) {
            if(element.style.display=='block'){
                  element.style.display='none';
            } else {
                  element.style.display='block';
            }
        }
    }
}

jQuery

中的

OR

 $(document).on('click', '.profileButton', function(element){
          if(element.style.display=='block'){
                  element.style.display='none';
          } else {
                  element.style.display='block';
          }
 });

对于切换操作，你可以简单地编写和使用像..

这样的类

<style>
    .hide { display: none; }
</style>
<script>
    $(document).on('click', '.profileButton', function(element){
            // here we used classToggle property to hide/display the element
            $(element).toggleClass('hide');
    });
</script>

Answer 2

如果您需要切换多个div，则需要为它们分配所有相同的类并使用document.querySelectorAll('.myClass')。但请记住，这将返回NodeList，您需要迭代以将样式应用于每个div。

Answer 3

我会稍微改变你的javascript以使其更适应多用途，同时许多人都说它总是最好使用类和ID是唯一的

＆＃13;

toggleVisibility = function(a) {
  var selector = document.querySelectorAll(a);
  for (let i = 0; i < selector.length; i++) {
    if (selector[i].style.display == 'block') {
      selector[i].style.display = 'none';
    } else {
      selector[i].style.display = 'block';
    }
  }
};

＆＃13;

.example {
  display: flex;
}
#testt {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}
.testt {
  background: darkorange;
  width: 100px;
  height: 100px;
  margin: 10px;
}
pre {
  background: green;
  width: 100px;
  height: 100px;
  margin: 10px;
}

＆＃13;

<div class="example">
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
</div>

<div class="example">
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
</div>

<div class="example">
  <pre></pre>
  <pre></pre>
  <pre></pre>
  <pre></pre>
  <pre></pre>
  <pre></pre>
</div>

<div id="profile_button_box" onclick="toggleVisibility('#testt')">test IDs</div>
<div id="profile_button_box" onclick="toggleVisibility('.testt')">test classes</div>
<div id="profile_button_box" onclick="toggleVisibility('pre')">test tags</div>

＆＃13;

我注意到ID我用#开始使用.开始使用toggleVisibility = function(a) { var selector = document.querySelectorAll(a); for (let i = 0; i < selector.length; i++) { selector[i].classList.toggle("hidden"); } };开始的ID，对于标签我只是写标签名称（这是相同的）作为CSS）。

希望这有帮助。

修改

当然，更好的方法（更少的代码）是切换隐藏的类。像这样。

＆＃13;
＆＃13;
.example { display: flex; } .hidden { display: none; } #testt { background: tomato; width: 100px; height: 100px; margin: 10px; }
＆＃13;
<div class="example"> <div id="testt"></div> <div id="testt"></div> <div id="testt"></div> <div id="testt"></div> <div id="testt"></div> <div id="testt"></div> </div> <div id="profile_button_box" onclick="toggleVisibility('#testt')">Button</div>
＆＃13;
String query = "@cm\\:customProp1:\"prop1\"";
＆＃13;
＆＃13;
＆＃13;

你使用它与上面的代码相同，但它使用的JS少了很多。

Answer 4

Orginal post

如果要始终设置多个元素的样式，请使用类   整个页面/网站。当你拥有或时，类很有用   未来可能会有不止一个共享的元素   相同的风格。示例可以是用于相关链接的“注释”或某种列表样式的div。

此外，给定元素可以关联多个类   有了它，而一个元素只能有一个id。例如，你可以   给div两个类，它们的样式都会生效。

此外，请注意，课程通常用于定义行为   除了视觉风格之外的风格。例如，jQuery表单   验证器插件大量使用类来定义验证   元素的行为（例如，是否需要，或者定义元素的类型）   输入格式）

类名的示例有：tag，comment，toolbar-button，   警告信息或电子邮件。

如果页面上有单个元素，请使用 ID   风格。请记住，ID必须是唯一的。在你的情况下，这可能是   正确的选项，因为可能只有一个“主要”div   页面。

ID的示例包括：main-content，header，footer或left-sidebar。一个   记住这个的好方法是一个类是一种项目，而id是   页面上项目的唯一名称。

我该如何修改此代码，以便它与severel id一起使用？

4 个答案: