Question

我有一个隐藏的div，直到你点击显示按钮。我的代码适用于单个实例，问题是我重复了多次，所以它只需要显示最近的而不是使用ID，但我不知道该怎么做。

这是我的代码：

<form class="form1">
...
</form>
<a onclick="showDiv()">Show</a>
<div id="show"  style="display:none;">
    <form id="form2">
    '''
    </form>
</div>

*repeated*

<form class="form1">
...
</form>
<a onclick="showDiv()">Show</a>
<div id="show"  style="display:none;">
    <form id="form2">
    '''
    </form>
</div>


<script>
function showDiv() {
   document.getElementById('show').style.display = "block";
}
</script>

如何为点击的内容显示相应的div？

更新：我想按最近的班级选择而不是最近的兄弟

Answer 1

HTML ID被认为是唯一的，这意味着您只能使用一次。您正在使用id show两次，它只被分配给第一个元素，因为，就像我之前说的那样，ID是唯一的，不能使用两次。

我建议将id更改为class并在名为getElementsByClassName的所有类上检查show并查找显示为false的第一个并使显示为true！

Answer 2

如果您要显示的div 绝对将始终显示在a之后，您可以尝试这样做：

function showDiv(e){ e.target.nextElementSibling.style.display='block'; }

Answer 3

document.querySelectorAll('.someClassName')[0]使用someClassName获取所有元素的第一个元素。或者，如果您想在单击元素下方找到div，则可以

function showDiv(event) {
  const clickedElement = event.target;
  clickedElement.nextElementSibling.style.display = 'block';
}

Answer 4

id在您的情况下应该是唯一的，它不是div'show'和形式'form2'
当你想重复一个元素时总是使用class
element.closest（此div）将给出预期结果

Answer 5

id需要独一无二。在您的情况下，您可以使用nextSibling来设置下一个元素的显示

function showDiv(elem) {
  elem.nextSibling.style.display = "block"
}

<form class="form1">
  ...
</form>
<a onclick="showDiv(this.nextSibling)">Show</a>
<div id="show1" style="display:none;">
  <form id="form21">
    text1
  </form>
</div>


<form class="form1">
  ...
</form>
<a onclick="showDiv(this.nextSibling)">Show</a>
<div id="show2" style="display:none;">
  <form id="form22">
    text2
  </form>
</div>

显示最近的班级

5 个答案: