Question

我将在页面上多次使用展开/折叠容器，我想避免使用id。当我只有一个容器时它工作得很好，但是当我添加更多容器时，它无效。我希望能够单独展开/折叠每个容器。

function switchVisible() {
  if (document.getElementById('div1')) {
    if (document.getElementById('div1').style.display == 'none') {
      document.getElementById('div1').style.display = 'block';
      document.getElementById('div2').style.display = 'none';
    } else {
      document.getElementById('div1').style.display = 'none';
      document.getElementById('div2').style.display = 'block';
    }
  }
}
$("#show_less").click(function() {
  if (this.value == "Show More") this.value = "Show Less";
  else this.value = "Show More";
});

#div2 {
  display: none;
}

<div id="div1">
  <p>This is div 1</p>
</div>
<div id="div2">
  <p>This is div 2</p>
</div>
<input id="show_less" type="button" value="Show More" onclick="switchVisible();" />
<div id="div1">
  <p>This is div 1</p>
</div>
<div id="div2">
  <p>This is div 2
    <br />
  </p>
</div>
<input id="show_less" type="button" value="Show More" onclick="switchVisible();" />

Answer 1

我是用班级做的！当你使用getElementsByClassName时，它会返回一个元素列表，而不仅仅是一个元素，这意味着你需要在列表中告诉你想要的那个元素。

您可以看到a working exemple here!

我在你的div中添加了一个类，与你的id保持同名。

在我的例子中，我为你的函数添加了两个参数：index和input

索引是告诉我们想要显示/隐藏的组，输入是改变输入的值＆＃34;显示更多/更少＆＃34;直接进入这个函数，而不是添加一个事件。

另外，我使用变量使它更干净！

这是Javascript：

function switchVisible(index, input) {
    var div1 = document.getElementsByClassName('div1')[index];
    var div2 = document.getElementsByClassName('div2')[index];
    if (div1) {
        if (div1.style.display == 'none') {
            div1.style.display = 'block';
            div2.style.display = 'none';
        } else {
            div1.style.display = 'none';
            div2.style.display = 'block';
        }
    }

    if (input.value == "Show More") input.value = "Show Less";
    else input.value = "Show More";

}

和HTML

<div class="div1">
    <p>This is div 1</p>
</div>
<div class="div2">
    <p>This is div 2</p>
</div>
<input id="show_less" type="button" value="Show More" onclick="switchVisible(0, this);" />
<div class="div1">
    <p>This is div 1</p>
</div>
<div class="div2">
    <p>This is div 2
        <br />
    </p>
</div>
<input id="show_less" type="button" value="Show More" onclick="switchVisible(1, this);" />

Answer 2

jQuery .click每次都会处理这个事件。您也不需要为按钮的onclick分配功能。只需将所有代码移动到.click事件中，如下所示：

$("#show_less").click(function(){
 if (document.getElementById('div1')) {
     if (document.getElementById('div1').style.display == 'none') {
         document.getElementById('div1').style.display = 'block';
         document.getElementById('div2').style.display = 'none';
     }
     else {
         document.getElementById('div1').style.display = 'none';
         document.getElementById('div2').style.display = 'block';
     }
 }
 if (this.value=="Show More") this.value = "Show Less";
 else this.value = "Show More";
 });

Answer 3

已编辑的回复

它无法正常工作，因为当您执行任何类型的“按类名获取元素”时，将返回与DOM中找到的类名匹配的第一个元素。这就是为什么第一个“Div1”切换而不是第二个“Div1”元素。你可以通过几种不同的方式处理这个问题（总有一种方法可以使它工作）;但是，我支持为您希望操作或与之交互的每个元素使用显式ID的约定。即使这些元素是通过代码生成的，您仍然可以通过编程方式为它们分配唯一的ID。否则，您需要编写一些标识调用元素（或其父div）的环形脚本然后执行必要的操作（如@Shryme的响应所示）。

我无法使JavaScript工作，他们是使用id的替代方案吗？

3 个答案: