javascript - js切换多个div

Question

我有 3 个默认隐藏的 div。我想为这 3 个创建一个切换，但我不想为每个 div 创建 onclick 并将其添加到 js 文件中:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

我尝试使用 clicked_id 创建此场景，但失败了。当我点击第三个 div 时，第二个也会显示。

var projectEen = document.getElementById("projectInhoud");
projectEen.style.display = "none";
var projectTwee = document.getElementById("projectInhoudTwee");
projectTwee.style.display = "none";
var projectDrie = document.getElementById("projectInhoudDrie");
projectDrie.style.display = "none";

function displayFunction(clicked_id) {
    if (clicked_id == 1) {
        projectEen.style.display = "block";
    } else {
        projectTwee.style.display = "block";
    }  if(clicked_id == 3) {
        projectDrie.style.display = "block";
    } else {
      projectTwee.style.display = "none";
    }
}

如何使用第一个代码来显示所有 3 个 div 而无需创建函数 3 次？

编辑:我的 html

     <div id="1" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: a</h1>
     </div>
  <div id="projectInhoudEen" class="projectInhoud"> content </div>

     <div id="2" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: b</h1>
     </div>
  <div id="projectInhoudTwee" class="projectInhoud"> content </div>

     <div id="3" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: c</h1>
     </div>
  <div id="projectInhoudDrie" class="projectInhoud"> content </div>

Answer 1

通过组合 document.getElementsByClassName和 EventTarget.addEventListener ，您可以将相同的事件处理程序附加到您的 div。在此处理程序中，您可以使用事件监听器提供的 event 对象检索您单击的元素。

编辑:您提供的 HTML 使事情变得有点复杂，因为 projectTitel 和 projectInhoud div 彼此不相关，除了位置。因此，为了显示正确的 projectInhoud div，我们需要在被点击的 projectTitel 之后找到下一个 projectInhoud。

• 为了使事情变得更好，我建议编辑 HTML 以使 projectTitel 和 projectInhoud div 成为同一父 div 的子级。
• 与此同时，我添加了一个 getClickedProjectIndex 函数，返回被点击的 projectTitel div 的索引。点击事件使用此索引显示正确的 projectInhoud。
• 然后，您可以使用一个简单的 toggle 函数，如果 div 不可见则显示它，如果它可见则隐藏它。

var divs = document.getElementsByClassName("projectTitel");

[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));

// by default, all projectInHound are hidden
hideElements("projectInhoud");


function handler(event) {
    // get the clicked project's index :
    var projectIndex = getClickedProjectIndex(event);

    // toggle the right projectInhoud div :
    toggleDiv(document.getElementsByClassName("projectInhoud")[projectIndex]);
}

// hide all elements that have the provided class name
function hideElements(className) {
    var elements = document.getElementsByClassName(className);

    [...elements].forEach(element => element.style.display = "none");
}

function getClickedProjectIndex(event) {
    var elements = document.getElementsByClassName("projectTitel");
    var projectIndex = 0;

    [...elements].forEach((element, index) => {
        if (element.id == event.currentTarget.id) {
            projectIndex = index;
        }
    });

    return projectIndex;
}

function toggleDiv(element) {

   if (element.style.display === 'none') {
      element.style.display = 'block';
   } else {
      element.style.display = 'none';
   }
}

<div id="1" class="projectTitel">
        <h1>Project: a</h1>
     </div>
  <div id="projectInhoudEen" class="projectInhoud" > content a</div>

     <div id="2" class="projectTitel">
        <h1>Project: b</h1>
     </div>
  <div id="projectInhoudTwee" class="projectInhoud"> content b</div>

     <div id="3" class="projectTitel">
        <h1>Project: c</h1>
     </div>
  <div id="projectInhoudDrie" class="projectInhoud"> content c</div>