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次所有功能来显示所有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对象单击的元素。

EDIT ：您提供的HTML会使事情变得更加复杂，因为projectTitel和projectInhoud div除位置以外彼此无关。因此，为了显示正确的projectInhoud div，我们需要在被单击的projectInhoud之后找到下一个projectTitel。

为使情况更好，我建议编辑HTML以使projectTitel和projectInhoud divs是同一父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>

Answer 2

我会尝试在HTML中进行以下操作：

<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>

对于您的JavaScript：

function myFunction(element){

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

}

js切换多个div

2 个答案: