javascript - 共享一个 javascript 函数的多个按钮

Question

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

现在我在每个 foreach 数据集旁边有一个带有 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 应该是唯一的。浏览器将始终返回他们找到的第一个，因此您总是获得第一行。

尝试使用事件的目标，这将是被点击的按钮，并找到它对应的 sibling 。

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，因为它会让您更轻松地处理事件。