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

我使用一个foreach循环来使用php从mysql表加载数据

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

问题是，该按钮只对foreach循环中第一次获取的数据起作用。我不确定是什么问题

这是我的密码

顺便说一句，我正在使用这个脚本

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

</script>

函数（）{
document.getElementById（“批准数据框”）.style.width=“95%”；
document.getElementById（“实际数据”）.style.display=“块”；
}

---

谢谢

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

尝试使用事件的目标（即单击的按钮），并找到相应的同级

document.body.addEventListener（'click'，函数（e）{
如果（e.target.className==“clickme”）{
e、 target.parentElement.style.backgroundColor=“红色”；
}
});

给我点颜色看看
点击我B
点击我C
点击我
点击我
发生这种情况是因为您没有使用唯一的ID。。。ID应该是唯一的。浏览器将始终返回他们找到的第一行，因此您总是获得第一行

尝试使用事件的目标（即单击的按钮），并找到相应的同级


document.body.addEventListener（'click'，函数（e）{
如果（e.target.className==“clickme”）{
e、 target.parentElement.style.backgroundColor=“红色”；
}
});

给我点颜色看看
点击我B
点击我C
点击我
点击我
ID是唯一的，您应该使用
类
。您需要像
onmouseover=“biger（this）”
那样传递它，以便只考虑选择器。以下是更新的代码：


.approvals数据框{
宽度：00px；
高度：20px；
背景颜色：浅灰色；
-webkit转换：400ms线性；
-moz跃迁：400ms线性；
-o-过渡：400ms线性；
-ms转换：400ms线性；
过渡：400ms线性；
边框：1个透明点；
保证金：2倍；
}
.实际数据{
显示：无；
}
桌子
tr，
th，
运输署{
边框：1px纯黑；
}
#样式按钮{
填充：10px；
背景颜色：珊瑚；
宽度：100px；
颜色：白色；
}
从数据库中提取数据
显示按钮
实际数据
悬停我以显示数据1
数据1
将鼠标悬停在我身上以显示数据2（不工作）
数据2
将鼠标悬停在我身上以显示数据3（不工作）
数据3
功能更大（elem）{
elem.parentNode.parentNode.getElementsByClassName（'approvals-data-box'）[0].style.width=“95%”；
elem.parentNode.parentNode.getElementsByClassName（'actual-data'）[0].style.display=“block”；
}
ID是唯一的，您应该使用
class
。您需要像
onmouseover=“biger（this）”
那样传递它，以便只考虑选择器。以下是更新的代码：


.approvals数据框{
宽度：00px；
高度：20px；
背景颜色：浅灰色；
-webkit转换：400ms线性；
-moz跃迁：400ms线性；
-o-过渡：400ms线性；
-ms转换：400ms线性；
过渡：400ms线性；
边框：1个透明点；
保证金：2倍；
}
.实际数据{
显示：无；
}
桌子
tr，
th，
运输署{
边框：1px纯黑；
}
#样式按钮{
填充：10px；
背景颜色：珊瑚；
宽度：100px；
颜色：白色；
}
从数据库中提取数据
显示按钮
实际数据
悬停我以显示数据1
数据1
将鼠标悬停在我身上以显示数据2（不工作）
数据2
将鼠标悬停在我身上以显示数据3（不工作）
数据3
功能更大（elem）{
elem.parentNode.parentNode.getElementsByClassName（'approvals-data-box'）[0].style.width=“95%”；
elem.parentNode.parentNode.getElementsByClassName（'actual-data'）[0].style.display=“block”；
}
这里的问题是您在文档上使用了
getElementById
和非唯一ID。我看到您多次使用
id=“批准数据框”

如果要影响多个元素，则应分配唯一ID或使用不同类型的选择（例如
document.getElementsByClassName
或
document.querySelectorAll
）

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

另一种方法是使用元素本身，而不通过应用类似于
onclick=“…”
的东西来查询DOM，这将使用事件的目标这里的问题是您在文档上使用了
getElementById
和非唯一id。我看到您多次使用
id=“approvals data box”

如果要影响多个元素，则应分配唯一ID或使用不同类型的选择（例如
document.getElementsByClassName
或
document.querySelectorAll
）

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

另一种方法是使用元素本身，而不通过应用类似于
onclick=“…”
的东西来查询DOM，这将使用事件的目标
id
用于一个特定元素。您只能有一个元素具有相同的
id

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