我无法让JavaScript正常工作，它们是使用id的替代方案吗？

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

功能开关可见{ if document.getElementById'div1'{ 如果document.getElementById'div1'.style.display=='none'{ document.getElementById'div1'.style.display='block'； document.getElementById'div2'。style.display='none'； }否则{ document.getElementById'div1'。style.display='none'； document.getElementById'div2'.style.display='block'； } } } $show_less.clickfunction{ 如果this.value==显示更多，则this.value=显示更少； 否则，this.value=显示更多； }; 第二组{ 显示：无； } 我是第一组

我是二组

我是第一组

我是二组

---

jQuery.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";
 });

编辑回应

---

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

我使用类完成了此操作！当您使用GetElementsByCassName时，它会返回一个元素列表，而不仅仅是一个元素，这意味着您需要告诉列表中需要哪个元素

你可以看到

我将类添加到您的div中，并保留与您的id相同的名称

在我的示例中，我向函数中添加了两个参数：索引和输入

索引是告诉wich group我们要显示/隐藏，输入是将输入show More/Loss的值直接更改到此函数中，而不是添加事件

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

下面是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);" />

---

但是document.getElementsByClassName方法对我不起作用：为什么不把代码也给我们看一下，因为可能您使用的不正确；它返回一个节点列表，而不是一个单独的元素。它不太清楚您想要获得什么。在wich条件下，何时显示和何时隐藏内容以响应wich事件。您可能需要简单地将组包装在容器中，但如果不了解具体情况，很难说您的需求多个div不能有相同的id它违反了W3标准如果您想在元素上使用相同的样式或相同的JS函数，请尝试向它们添加类而不是id，因为您使用jquery为什么不使用它的选择器和show/hide/toggle函数而不是DOM方法呢？谢谢您的帮助响应，但我试图避免使用id。我不能在网页上使用相同的id，W3C将生成错误。他们还有其他的替代方法吗？我试过用类作为替代方法，但没有成功。这是一段代码，而不是将jQuery与javascript混合和匹配。您是否尝试使用jQuery类选择器而不是document.getElementsByClassName？例如：$'.Div1'.hide；或$'.Div1.show；当您按类名执行任何类型的Get元素时，将返回在DOM中找到的第一个出现的类名。因此，您应该使用更明确的内容，例如ID。为什么您不能为希望切换的每个div分配唯一的元素ID呢？非常感谢您的时间，您的答案是最有帮助的。