在 Javascript 中对不同的 ID 多次使用相同的函数

Question

我想在一个页面上多次应用同一个功能，每次都应用到具有自己 ID 的元素（以显示和隐藏元素）。当我在不指定 ID 的情况下应用该函数时，整个文档中的所有元素都会发生变化。那么我是否必须在 Javascript 文件中多次指定该函数，每次都有自己的 ID，或者是否有可能在运行时以某种方式获取 ID？

HTML

<button onclick="switchIt_stahlherstellung">switch</button>
<div id="stahlherstellung">
  show/hide stuff  
</div>

<button onclick="switchIt_produkte">switch</button>
<div id="produkte">
  show/hide stuff
</div>

and so on.

Javascript

function switchIt_stahlherstellung() {
  if (document.getElementById('stahlherstellung')) {
      if (document.getElementById('stahlherstellung').style.display == 'none') {
          document.getElementById('stahlherstellung').style.display = 'block';
      }
      else {
          document.getElementById('stahlherstellung').style.display = 'none';
      }
  }
}

function switchIt_produkte() {
      if (document.getElementById('produkte')) {
          if (document.getElementById('produkte').style.display == 'none') {
              document.getElementById('produkte').style.display = 'block';
          }
          else {
              document.getElementById('produkte').style.display = 'none';
          }
      }
    }

Answer 1

您需要了解更多关于函数的知识，特别是参数。

例如：

function switchIt_stahlherstellung(id) {
  if (document.getElementById(id)) {
      if (document.getElementById(id).style.display == 'none') {
          document.getElementById(id).style.display = 'block';
      }
      else {
          document.getElementById(id).style.display = 'none';
      }
  }
}

然后您可以像这样调用单个函数：

switchIt_stahlherstellung('einheiten_stahlherstellung');

了解更多：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Answer 2

简单css/JS混合解决方案：

document.querySelectorAll('button.switcher').forEach(bt=>{
  bt.onclick=()=>bt.classList.toggle('DivHide')
})

button.switcher.DivHide + div { visibility: hidden; }
                           /* or-> display: none; <- */

<button class="switcher">switch</button>
<div id="stahlherstellung">
  show/hide stuff  
</div>

<button class="switcher">switch</button>
<div id="produkte">
  show/hide stuff
</div>

Answer 3

有一种更简单的方法可以完成您的工作，无需所有这些 "ifs" 并且无需查询和映射所有按钮。在你的 html 到 "onclick" 中，你在函数调用时传入你想要显示或隐藏的 dive 的参数。在您的 div 中添加两个 "class"，一个用于管理显示，另一个用于设置 div.

的样式

html

<button onclick="switchIt('stahlherstellung')">click</button>
<div id="stahlherstellung" class="hidden my-styled-div">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
        enim unde dolor aperiam pariatur architecto recusandae quibusdam
        deleniti modi culpa voluptas adipisci totam atque, laboriosam quis eos
        nobis obcaecati reprehenderit.
    </p>
</div>

<button onclick="switchIt('produkte')">click</button>
<div id="produkte" class="hidden my-styled-div">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
        nostrum distinctio nisi vero unde molestias earum sunt quasi similique 
        a sint, perspiciatis recusandae fugit et omnis totam provident numquam
        exercitationem!
    </p>
</div>

例如一点css。

css

button {
    padding: 5px;
    border: 1px solid black;
}

.my-styled-div {
    margin-top: 50px;
    width: 100vw;
    background-color: #808080;
    padding: 10px;
}

.hidden {
    display: none;
}

和函数。

你得到传递给函数调用的参数，它允许你通过它的 "id" select 你的 div 并在隐藏的 [=42] 上添加一个 "toogle" =].

javascript

function switchIt(id) {
    document.getElementById(id).classList.toggle("hidden");
}

在 Javascript 中对不同的 ID 多次使用相同的函数

Use same function multiple times on different IDs in Javascript

javascript

html

function

dynamically-generated