我应该如何修改此代码以使其适用于多个 ID？

Question

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

我从另一个站点和我的 div 中获得此代码，当单击某些内容时，它应该从 display:none 更改为 display:block，不适用于严重的 div ID 来自 css :/

我在我的 div 中得到了这个，点击它可以让其他人 div 可见：

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

我看到这只能有一个ID，但是我应该如何修改代码才能一键处理多个div？

Answer 1

如果您需要切换许多 div，您需要为它们分配相同的 class 并使用 document.querySelectorAll('.myClass')。不过请记住，这将 return 一个 NodeList，您需要对其进行迭代以将样式应用于每个 div.

Answer 2

命名一个 class 并像这样尝试..

<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

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

对于切换操作，您可以简单地编写和使用 class，例如..

<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 3

Orginal post

Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.

Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.

Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)

Examples of class names are: tag, comment, toolbar-button, warning-message, or email.

Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.

Examples of ids are: main-content, header, footer, or left-sidebar. A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.

Answer 4

我会稍微更改一下您的 javascript 以使其更适合多用途，而且正如许多人所说，最好始终使用 classes 并且 ID 应该是唯一的

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

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

<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>

您会注意到，对于 ID，我的 ID 名称以 # 开头，对于 classes，我以 . 开头，对于标签，我只写标签名称（这是与 CSS).

相同

希望对您有所帮助。

编辑：

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

toggleVisibility = function(a) {
  var selector = document.querySelectorAll(a);
  for (let i = 0; i < selector.length; i++) {
    selector[i].classList.toggle("hidden");
  }
};

.example {
  display: flex;
}
.hidden {
  display: none;
}
#testt {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<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>

你用的和上面的代码一样，只是少用了很多JS。

我应该如何修改此代码以使其适用于多个 ID？

How should I modify this code so it works with severel id's?

javascript

css

visibility

display