Question

嗨，我不熟悉HTML和JS，我正在尝试创建一个仅显示想要显示的div的函数，因为div可以大于5，所以我希望使其动态。我想要第一个按钮只想显示D1 div，如果我单击按钮2，则d1的其余部分将被隐藏，而d1将被隐藏，而d3则位于上面。非常感谢您的任何建议或帮助

function myFunction(t, n) {
  var g = t + n;

  var x = document.getElementById(g);
  if (g === "D1") {
    x.style.display = "block";
    //hide div d2 to d5 or more div  only show d1
  } else if (g === "D2") {
    x.style.display = "block";
    //hide div d1 then d3 to d5 or more div  only show d2

  } else if (g === "D3") {
    x.style.display = "block";
  } else if (g === "D4") {
    x.style.display = "block";
  } else if (g === "D5") {
    x.style.display = "block";
  }

}

<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>


<div id="D1" style="Display:none">
  This is my DIV element.
</div>

<div id="D2" style="Display:none">
  This is my DIV element.
</div>
<div id="D3" style="Display:none">
  This is my DIV element.
</div>
<div id="D4" style="Display:none">
  This is my DIV element.
</div>
<div id="D5" style="Display:none">
  This is my DIV element.
</div>

Answer 1

您的答案应该是forEach循环。我在div上添加了数字，以使情况更加清楚：

    <button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>

<div id="D1" style="Display:none">
  This is my DIV 1 element.
</div>

<div id="D2" style="Display:none">
  This is my DIV 2 element.
</div>
<div id="D3" style="Display:none">
  This is my DIV 3 element.
</div>
<div id="D4" style="Display:none">
  This is my DIV 4 element.
</div>
<div id="D5" style="Display:none">
  This is my DIV 5 element.
</div>

您的函数现在可以通过querySelectorAll查找所有div，并在与传递的ID匹配时添加可见性，否则将其隐藏：

function myFunction(t, n) {
  var g = t + n;
  // get all Divs
const allDivs = document.querySelectorAll("div");
  allDivs.forEach(div => {
    if(div.id == t+n) {
      div.style.display = "block";
    } else {
      div.style.display = "none"
    }
  })
}

您还可以签出pen。

Answer 2

首先，隐藏所有内容，然后显示您要显示的唯一内容。

function myFunction(t, n) {

  // first hide all
  for ( var i=1; i<=5; i++ ) {
     document.getElementById(t+i).style.display = 'none';
  }

  // then show only one
  document.getElementById(t+n).style.display = 'block';
}

<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>


<div id="D1" style="Display:none">
  This is my DIV1 element.
</div>

<div id="D2" style="Display:none">
  This is my DIV2 element.
</div>
<div id="D3" style="Display:none">
  This is my DIV3 element.
</div>
<div id="D4" style="Display:none">
  This is my DIV4 element.
</div>
<div id="D5" style="Display:none">
  This is my DIV5 element.
</div>

Answer 3

function myFunction(t, n) {
  var g = t + n;
  for(let i=1;i<=5;i++){
    //Check class is show
    let currentClassName = t+i;
    if(currentClassName  == g){
      document.getElementById(currentClassName).style.display = "block"
    }else{
      document.getElementById(currentClassName).style.display = "none"
    }
  }
}

Answer 4

function myFunction(t) {
  ['D1', 'D2', 'D3', 'D4', 'D5'].forEach((div) => {
    if (div !== t) {
      document.getElementById(div).style.display = "none";
    } else {
      document.getElementById(div).style.display = "block";
    }
  });
}

<button onclick="myFunction('D1')">B1</button>
<button onclick="myFunction('D2')">B2</button>
<button onclick="myFunction('D3')">B3</button>
<button onclick="myFunction('D4')">B4</button>
<button onclick="myFunction('D5')">B5</button>


<div id="D1" style="Display:none">
  This is my D1 DIV element.
</div>

<div id="D2" style="Display:none">
  This is my D2 DIV element.
</div>
<div id="D3" style="Display:none">
  This is my D3 DIV element.
</div>
<div id="D4" style="Display:none">
  This is my D4 DIV element.
</div>
<div id="D5" style="Display:none">
  This is my D5 DIV element.
</div>

Answer 5

function myFunction(t, n) {
  var g = t + n;
var dates = document.querySelectorAll('*[id^="D"]');
for (var i=0;i<dates.length;i++) {
dates[i].style.display= "none";
}
  var x = document.getElementById(g);
  if (g === "D1") {
    x.style.display = "block";
    //hide div d2 to d5 or more div  only show d1
  } else if (g === "D2") {
    x.style.display = "block";
    //hide div d1 then d3 to d5 or more div  only show d2

  } else if (g === "D3") {
    x.style.display = "block";
  } else if (g === "D4") {
    x.style.display = "block";
  } else if (g === "D5") {
    x.style.display = "block";
  }

}

<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>


<div id="D1" style="Display:none">
  This is my DIV element1.
</div>

<div id="D2" style="Display:none">
  This is my DIV element2.
</div>
<div id="D3" style="Display:none">
  This is my DIV element3.
</div>
<div id="D4" style="Display:none">
  This is my DIV element4.
</div>
<div id="D5" style="Display:none">
  This is my DIV element5.
</div>

如何同时动态显示和隐藏div？

5 个答案: