Javascript 函数用于 php 循环

Question

我有这种情况：

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("commentDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

和php代码

<?php
echo "<table><tr  onclick='myFunction()'><td>Row A1</td></tr>"; //A1 row from my table
echo "<tr><td><div id='commentDIV' style='display:none'> Row B1</div></td></tr></table>"; // the B1 row show after click on the A1
?>

一切正常，当我点击第一行时，第二次出现。

在这种情况下，我如何 use/modify 我的 javascript 功能？

<?php
    $x=0;
    while($x<10){
        echo "<table><tr  onclick='myFunction()'><td>Row A$x</td></tr>"; //Ax row from my table
        echo "<tr><td><div id='commentDIV' style='display:none'> Row B$x</div></td></tr></table>"; // the Bx row must show after click on the Ax
        $x++;
    }
?>

请帮忙拯救我的一天！非常感谢！

Answer 1

id 属性在文档中应该是唯一的，尝试通过常见的 class 来更改重复的属性，例如：

<?php
    $x=0;
    while($x<10){
        echo "<table><tr  onclick='myFunction(this)'><td>Row A$x</td></tr>"; //Ax row from my table
        echo "<tr><td><div class='commentDIV' style='display:none'> Row B$x</div></td></tr></table>"; // the Bx row must show after click on the Ax
        $x++;
    }
?>

注意： 您应该将 'this' 对象作为参数传递给您的函数。

然后在您的 js 中，您可以使用传递的参数使用 class 名称 self.nextElementSibling.querySelector(".commentDIV") 搜索相关的 div，最后像这样切换显示：

function myFunction(self) {
  var related_div = self.nextElementSibling.querySelector(".commentDIV");

  related_div.style.display = (related_div.style.display === 'none') ? 'block' : 'none'
}

<table border=1>
  <tr onclick='myFunction(this)'>
    <td>Row A1</td>
  </tr>
  <tr>
    <td>
      <div class='commentDIV' style='display:none'> Row B1</div>
    </td>
  </tr>

  <tr onclick='myFunction(this)'>
    <td>Row A2</td>
  </tr>
  <tr>
    <td>
      <div class='commentDIV' style='display:none'> Row B2</div>
    </td>
  </tr>
</table>

Answer 2

问题是您对所有 Div 使用相同的 ID "commentDIV"，因此您应该更改循环和函数。

将$x添加到div id原名commentDIV
更改 myFunction 调用以包含 $x 号码
将 id 参数添加到 myFunction 定义
将传递的 ID 附加到 getElementById 值

像这样：

<?php 
$x=0;
while($x<10){
  echo "<table><tr  onclick='myFunction($x)'><td>Row A$x</td></tr>";
  //                                    ^^--- 2. add $x
  echo "<tr><td><div id='commentDIV_$x' style='display:none'> Row B$x</div></td></tr></table>";
  //                               ^^^--- 1. add $x
$x++;}
?>

javascript 代码更改为：

<script type="text/javascript">
    function myFunction(id) {
         //             ^^--- 3. add id
         var x = document.getElementById("commentDIV_" + id);
         //                                         ^ ^^^^^--- 4. append id
         if (x.style.display === "none") {
            x.style.display = "block";
         } else {
            x.style.display = "none";
         }
    }
</script>

Answer 3

首先，ID需要唯一才能正常运行，所以我宁愿使用类。

如前所述，此 table 将被回显 10 次：

<table>
  <tr onclick="myFunction(this)">
    <td>Row A$x</td>
  </tr>
  <tr>
    <td>
      <div class="commentDIV" style="display:none">Row B$x</div>
    </td>
  </tr>
</table>

接下来，修改 javascript 使元素作为参数传递，然后获取下一个元素的第一个子元素：

function myFunction(e) {
  var x = e.nextElementSibling.children[0];
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Javascript 函数用于 php 循环

Javascript function for a php loop

javascript

php

getelementbyid