共享一个JavaScript函数的倍数按钮

Question

我正在使用foreach循环使用php从mysql表加载数据。

现在，每个前一组数据旁边都有一个带有javascript函数的按钮，以显示数据。

问题是，该按钮仅适用于foreach循环中最先提取的数据。 我不确定是什么问题？

这是我的代码https://jsfiddle.net/7qL2osp5/

我正在使用此脚本

<script type="text/javascript">
  function bigger(){
        document.getElementById("approvals-data-box").style.width="95%";
        document.getElementById("actual-data").style.display="block";
  }

</script>

谢谢

Answer 1

发生这种情况是因为您没有使用唯一的ID。ID是唯一的。 浏览器将始终返回他们找到的第一行，因此为什么总是获得第一行。

尝试使用事件的目标（将被单击的按钮），并找到其对应的同级。

 document.body.addEventListener('click',function(e){ if(e.target.className == "clickme"){ e.target.parentElement.style.backgroundColor="red"; } }); 

 <ul> <li><button class="clickme">Click me</button> A</li> <li><button class="clickme">Click me</button> B</li> <li><button class="clickme">Click me</button> C</li> <li><button class="clickme">Click me</button> D</li> <li><button class="clickme">Click me</button> E</li> </ul> 

这是一个最小的例子。 该脚本将事件附加到主体，并且仅在元素的类为“ clickme”时才触发效果。 然后，我们以该按钮的父级为例，并更改其背景色。

请注意，这是一个非常小的示例，并且不是一个很好的方法。 例如，如果您向按钮添加另一个类，则将无法使用...我建议您使用jQuery，因为它会使事情变得更容易处理。

Answer 2

id用于一个特定元素。 您只能有一个具有相同id元素。

您需要做的是给他们所有不同的id ，然后将id传递给函数。 您还需要样式类。

ID用于特定元素。 类用于元素类型。

这是一个工作版本：

https://jsfiddle.net/7qL2osp5/1/

在CSS中，您可以使用. 用于类， #用于id 。 由于您刚刚起步，因此这可能是尝试学习jQuery的好时机。

Answer 3

ID是唯一的，您应该使用class 。 您需要像onmouseover="bigger(this)"一样传递它，以便仅考虑选择器。 下面是更新的代码：

 .approvals-data-box { width: 00px; height: 20px; background-color: lightgray; -webkit-transition: 400ms linear; -moz-transition: 400ms linear; -o-transition: 400ms linear; -ms-transition: 400ms linear; transition: 400ms linear; border: 1px dotted transparent; margin: 2px; } .actual-data { display: none; } table, tr, th, td { border: 1px solid black; } #style-button { padding: 10px; background-color: coral; width: 100px; color: white; } 

 <h1>Fetched data from database</h1> <table> <tr> <th>Reveal Button</th> <th>Actual Data</th> </tr> <!---------------------------------------------> <tr> <td> <div onmouseover="bigger(this)" id="style-button">hover me to reveal data 1</div> </td> <td> <div class="approvals-data-box"> <div class="actual-data">data 1</div> </div> </td> </tr> <!---------------------------------------------> <tr> <td> <div onmouseover="bigger(this)" id="style-button">hover me to reveal data 2 (not working)</div> </td> <td> <div class="approvals-data-box"> <div class="actual-data">data 2</div> </div> </td> </tr> <!---------------------------------------------> <tr> <td> <div onmouseover="bigger(this)" id="style-button">hover me to reveal data 3 (not working)</div> </td> <td> <div class="approvals-data-box"> <div class="actual-data">data 3</div> </div> </td> </tr> </table> <script type="text/javascript"> function bigger(elem) { elem.parentNode.parentNode.getElementsByClassName('approvals-data-box')[0].style.width = "95%"; elem.parentNode.parentNode.getElementsByClassName('actual-data')[0].style.display = "block"; } </script> 

Answer 4

这里的问题是您在文档上使用了getElementById和非唯一ID。 我看到您有很多次id="approvals-data-box" 。

您应该分配唯一的ID或使用其他类型的选择（例如，如果要影响多个元素，请使用document.getElementsByClassName或document.querySelectorAll 。

提示：由于您是使用php生成DOM，因此可以使用uniqid()函数将随机内容附加到ID中

另一种方法是使用元素本身，而不通过应用诸如onclick="..."类的东西来查询DOM，该东西将使用事件的目标