切换按钮仅适用于第一篇文章答案

【问题标题】：Toggle button only works on first article切换按钮仅适用于第一篇文章
【发布时间】：2017-11-24 03:30:09
【问题描述】：

我有一个切换按钮，可以隐藏/显示，并出现在每篇文章中。（我的网站有大约一百万篇文章）

但在每个站点上，它的切换按钮只切换第一篇/顶部文章。

HTML：

<button class="proddetBtn" style="vertical-align:middle" onclick="myFunction()"><div>Show productdetails</div>
     </button>

<div id="myCRITERIA" style="display: ">
  <?php echo $criteria ?>
</div> <br>

Js：

 function myFunction() {
     var x = document.getElementById('myCRITERIA');
     if (x.style.display === 'none') {
         x.style.display = 'block';
       } else {
         x.style.display = 'none';
     }
 }

【问题讨论】：

用示例数据填充标准 div
document.getElementById('myCRITERIA'); 仅选择元素，动态传递 ID 属性...
如何传递 ID 属性？对不起，我是业余爱好者
我看不出 OP 的代码有什么问题。我用它制作了a Pen，它可以工作。
对，那是因为 ID 在整个文档中必须是唯一的。正如@Prasad 所说，您必须将目标的 ID 传递给函数。

标签： javascript html button toggle

【解决方案1】：

在函数中传递targeted element Id。然后使用三元运算符应用切换效果

function myFunction(id) {
  var x = document.getElementById(id);
x.style.display = x.style.display === 'none'? 'block' :'none';
}

<button class="proddetBtn" style="vertical-align:middle" onclick="myFunction('myCRITERIA')"><div>Show productdetails</div>
 </button>

<div id="myCRITERIA" style="display: ">
some
  <?php echo $criteria ?>
</div> <br>

更新

您可以在类中使用更多数量的元素。ForEach 用于迭代元素

function myFunction() {
  document.querySelectorAll('.clear').forEach(function(a) {
    a.style.display = a.style.display === 'none' ? 'block' : 'none';
  })
}

<button class="proddetBtn" style="vertical-align:middle" onclick="myFunction()"><div>Show productdetails</div>
 </button>

<div class="clear" style="display:none">some</div> <br>
<div  class="clear" style="display:none ">some</div> <br>
<div  class="clear" style="display: ">some</div> <br>
<div  class="clear" style="display:none ">some</div> <br>
<div class="clear" style="display: ">some</div> <br>
<div  class="clear" style="display:none ">some</div> <br>
<div  class="clear" style="display: ">some</div> <br>

【讨论】：

第一个代码给了我与原始代码相同的问题。它只切换第一个元素。第二个代码给了我四行说“一些”的内容，它们一直在那里，并且只在顶部切换了一些空白。
我认为第二个代码在正确的轨道上。它会在每篇文章上切换，但所有文章都是同时进行的。因此，当我单击其中一个时，它会影响页面上的所有文章，例如 50 篇文章。
是的，你是对的。点击元素和隐藏元素是不同的
@Prasad，你有 8 次 id="myCRITERIA"，yurgh，请在我投反对票之前删除它 :)
我用替换了所有的“一些”元素（$criteria 输出每篇文章的唯一产品详细信息），它有点工作。它同时隐藏/显示所有元素，但它比以前更好:) 谢谢