javascript - 尝试在函数中显示/隐藏时，foreach 循环中的 div #id 仅选择最后一个变量

Question

我正在通过一个简单的 foreach 循环导航以获取“博客文章”。它显示了基本的博客信息、回复和删除按钮。当我选择“回复”按钮时，回复按钮下方会出现一个小表格以供填写。问题是，我将变量传递给的函数只获取表单的最后一个 id。如何将我的函数或 div 元素更改为对于每个实例都是唯一的？

我已经尝试在“id”和函数上设置 PHP @echo 变量，我已经检查了所有的左括号和右括号 10 倍。我尝试过使用不同的 GetElementBy ... 方法。我开始研究 Jquery，但我只想用 PHP/Javascript 来完成它。

<?php foreach ($mainentries as $entry) : 
$subentryID = $entry['SubEntryID'];
  if ($subentryID == "0") 
  { ?>
      <div><tr><td><?php echo ('#'.$entry['EntryID'].' - ')?></td>
               <td><?php echo $entry['Body']; ?></td>
               <br />
               <?php foreach($subentries as $subentry) : ?>
               <?php if ($subentry['SubEntryID'] == $entry['EntryID']) 
                     {   ?>
              <div id="subposts">
              <td><td><td>#<?php echo $subentry['EntryID'];?></td><br>
              <td>
              <?php echo $subentry['Body']; ?>
              </td></td></td>
       </div>
       <?php } endforeach; ?>
       <br />
       <td>
<button onclick="cookiechecksub()">Reply</button>
    <?php echo $entry['EntryID']; 
     $subform = $entry['EntryID']; ?>
     <div id="<?php echo $subform?>" style="display:none">
     <form action="Add_subentry.php" method="post" id="Add_subentry"> 
     <label>Title:</label><br /> 
     <input type = "text" name="Title" class="Title"/> <br />
     <label>Body</label><br />
     <div class="area">
     <input type = "textarea" name="Body" class="Body"/><br />
     </div>
     <input type="hidden" readonly="true" name="EntryID" value="<?php echo $entry['EntryID']; ?>" />
     <input type=submit id="btnReply" value="Submit Reply"/>
     </form>
     </div></td>
     <td>
     <form action="Delete_entry.php" method="post" id="Delete_entry">    
     <input type="hidden" readonly="true" name="EntryID" value="<?php echo $entry['EntryID']; ?>" />
     <?php if ($userid == 1) 
     { ?>
     <input type="submit" id="btnDelete" value="Delete Post"/>
     <?php } ?>
     <br /><br />
     </form>
     </td>
     </tr>
     </div>
     <?php 
} endforeach; ?>

<Script>
function cookiechecksub() {
    if (!userid) {
        if (confirm("Please log in first")) {
            window.location.replace("http://localhost/alexdes/login-logout.php");
            }
        }
    else {
        TryAddSubPost();
    }
}
function TryAddSubPost() 
{
    var x = document.getElementById("<?php echo $subform?>");
    if (x.style.display === "none") 
    {
        x.style.display="block";
    } 
    else 
    {
        x.style.display="none";
    }
}
</Script>

Answer 1

这是因为你在 js 函数中使用了 php echo，尤其是在 TryAddSubPost

改成这样:

<script>
function cookiechecksub(id) {
    if (!userid) {
        if (confirm("Please log in first")) {
            window.location.replace("http://localhost/alexdes/login-logout.php");
            }
        }
    else {
        TryAddSubPost(id);
    }
}
function TryAddSubPost(id) 
{
    var x = document.getElementById(id);
    if (x.style.display === "none") 
    {
        x.style.display="block";
    } 
    else 
    {
        x.style.display="none";
    }
}
</script>

并且仅在调用函数时使用来自 php 的 id，如下所示:

<button onclick="cookiechecksub('<?php echo $entry['EntryID']?>')">Reply</button>