Question

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

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

问题是，该按钮仅适用于foreach循环中第一个获取的数据。我不确定问题是什么？

这是我的代码tutorial

我正在使用这个脚本btw

Project
--- libs
------ lib1
---------CmakeLists.txt
------ lib2
---------lib2.cmake
---------file1.c
---------file2.c
--- src
...

由于

Answer 1

这是因为您没有使用唯一ID ... ID应该是唯一的。浏览器将始终返回他们找到的第一个，这就是为什么你总是得到第一行。

尝试使用事件的目标，它将是单击的按钮，并找到相应的兄弟姐妹。

    resolve: {
resolvedTheme: ['ThemeService', function (ThemeService) {
return ThemeService.get();
}]
}

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

这是一个最小的例子。该脚本将一个事件附加到正文，并仅在元素的类是“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。

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

4 个答案: