javascript - 我应该如何修改此代码以使其适用于多个 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 当单击某些内容时，不适用于来自 css 的严重 div id:/

我在我的 div 中得到了这个，单击它可以使其他 div 可见:

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

我读到这个只能有一个ID，但是我应该如何修改代码才能一键处理严重的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>