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
?>

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

在这种情况下如何使用/修改我的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

问题在于，所有Div都使用相同的ID“ commentDIV”，因此您应该更改循环和函数。

将$x添加到最初称为id的div 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 2

id属性在文档中应该是唯一的，请尝试通过常见的类（例如：

）更改重复的属性

<?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中，您可以使用传递的参数使用类名div搜索相关的self.nextElementSibling.querySelector(".commentDIV")，最后像这样切换显示：

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 3

首先，ID必须是唯一的才能正常运行，所以我宁愿使用类。

如上所述，该表将被回显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";
  }
}

php循环的Javascript函数

3 个答案: