Используйте одну и ту же функцию несколько раз на разных идентификаторах в Javascript

Question

Я хочу применить одну и ту же функцию несколько раз на странице, каждый раз к элементам с их собственным идентификатором (для отображения и скрытия элементов). Когда я применяю функцию без указания идентификаторов, все элементы по всему документу меняются. Поэтому нужно ли указывать функцию несколько раз в файле Javascript, каждый со своим собственным идентификатором, или можно как-то получить идентификатор во время выполнения?

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

простой 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 2

Вам необходимо больше узнать о функциях, а именно параметрах .

Например:

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 3

Существует более простой способ выполнить свою работу без всех этих «если» и без запроса и сопоставления всех ваших кнопок. В вашем html для «onclick» при вызове функции вы передаете в аргументе идентификатор погружения, которое вы хотите показать или скрыть. К вашему div добавьте два «класса» один для управления дисплеем, а другой для стиля вашего 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;
}

И функция.

Вы получаете аргумент, переданный в вызов функции, который позволяет вам выберите свой div по его «id» и добавьте «toogle» в скрытый класс.

javascript

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