我的功能适用于所有元素，而不是单独使用

Question

我一直在尝试创建一个将对每个元素分别起作用的函数，但是，它要么仅对第一个元素起作用，要么对现在的所有元素起作用。我是最近才开始学习的，请与我分享您的智慧。）我如何使某个功能实现我所需要的？

  function toggleClassOnClickAll(clickingObjIds, addToElems, classAdd){

let clickOn = document.querySelectorAll(clickingObjIds);
let addTo = document.querySelectorAll(addToElems);
let delFrom = document.querySelectorAll(addToElems);

let status = 1;
Array.from(clickOn).forEach(el => el.addEventListener('click', function() { 
	if(status == 1){
		Array.from(addTo).forEach(el => el.classList.add(classAdd));
		status = 0;	
	} else if (status == 0){
			
		Array.from(delFrom).forEach(el => el.classList.remove(classAdd));
		status = 1;

	};
}));
 };

 toggleClassOnClickAll(".display-button", ".hidden-el", "block");

.element {
  width: 300px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
}

.hidden-el {
  display: none;
  background-color: red;
  width: 100%;
  height: 20px;
  
}
.display-button{
  cursor: pointer;
  font-family: arial;
  text-align: center;
}
.block {
  display: block;
}

<div class="element">
  <p class="display-button"> Dispay hidden element </p>
  <div class="hidden-el" id="hidden-id"></div>
</div>
<div class="element">
  <p class="display-button"> Dispay hidden element </p>
  <div class="hidden-el" id="hidden-id"></div>
</div>
<div class="element">
  <p class="display-button"> Dispay hidden element </p>
  <div class="hidden-el" id="hidden-id"></div>
</div>

Answer 1

答案：

function toggleClassOnClickAll(clickingObjIds, addToElems, classAdd) {

  let clickOn = document.querySelectorAll(clickingObjIds);

  let status = 1;
  Array.from(clickOn).forEach(el => el.addEventListener('click', function(e) {

    var clickedElement = e.currentTarget.parentElement;
    let hiddenElement = clickedElement.querySelector(addToElems);

    hiddenElement.classList.toggle(classAdd);

  }));
};
toggleClassOnClickAll(".display-button", ".hidden-el", "block");

.element {
  width: 300px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
}

.hidden-el {
  display: none;
  background-color: red;
  width: 100%;
  height: 20px;
}

.display-button {
  cursor: pointer;
  font-family: arial;
  text-align: center;
}

.block {
  display: block;
}

<div class="element">
  <p class="display-button"> Dispay hidden element </p>
  <div class="hidden-el" id="hidden-id"></div>
</div>
<div class="element">
  <p class="display-button"> Dispay hidden element </p>
  <div class="hidden-el" id="hidden-id"></div>
</div>
<div class="element">
  <p class="display-button"> Dispay hidden element </p>
  <div class="hidden-el" id="hidden-id"></div>
</div>