javascript - 在 php 中隐藏/显示切换回显结果

Question

我正在尝试切换从表中回显的结果，但我没有运气。 我在 HTML 中尝试了相同的代码，它运行得很好。 我已经为此工作了一段时间，并且想知道是否有人可以为我指明正确的方向。

我累了

• 在 php echo 中添加 JavaScript。
• 向 id 添加计数器，使其在循环中唯一
• 将每行回显结果放入 echo("");标签。

添加一个计数器，使 id 在循环中唯一。

PHP

   $i = 1;
   while ($output = $fc_sel->fetch_assoc()) {
   $fc_run .= $output['Food_Cat_name'] . $output['Food_Cat_Desc'] . '<br>';
   $_SESSION['Food_Cat_name'] = $output['Food_Cat_name']; //echo out product name
   $_SESSION['Food_Cat_Desc'] = $output['Food_Cat_Desc']; //echo out product desc
 echo"

 <div id='first_product'>

 <button onclick='toggle_visibility('tog')'>Toggle</button>
  <div id='tog'>

        <div id='red_head'>
            <p id='menu_title' class ='hidden' onclick='toggle_visibility('tog')'>  Add your first menu item</p>
        </div>
        <h3 id='menu'>Menu Section</h3>

        <form name='first_prod' id='first_prod' enctype='multipart/form-data' action='testing.php' method='POST' accept-charset='utf-8' >               

            <label id='cat_label' name='cat_label'>Name</label>
            <input type='text' id='cat_name' name='cat_name' value=''>

            <label id='desc_label' name='desc_label'>Description</label>
            <input type='text' id='cat_desc' name='cat_desc' value=''>



        </form>


    </div>
    </div>

    ";  
    }
    }

JavaScript

 <script>
    //turn entire div into toggle
        function toggle_visibility(id) {

            var e = document.getElementById(id);
            if (e.style.display == 'block' || e.style.display == '')
                e.style.display = 'none';
            else
                e.style.display = 'block';
        }

    </script> 

Answer 1

onclick='toggle_visibility('tog')' 中的单引号与外部单引号冲突。因此，要么转义它们，要么在外部对或内部对中使用双引号。

然后在 PHP 中，删除 <?php echo 。只需将 HTML 放入 PHP 中即可。 echo只会让事情变得复杂。如果您需要在 HTML 中添加动态数据，只需在该位置注入(inject) <?php ... ?> 即可。 。但到目前为止，我还没有在您的 HTML 中看到任何内容:它是静态的。

这是在两个地方进行更改后的工作片段:

//turn entire div into toggle
function toggle_visibility(id) {

  var e = document.getElementById(id);
  if (e.style.display == 'block' || e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

<div id='first_product'>
  <button onclick="toggle_visibility('tog')">Toggle</button>
  <div id='tog'>
    <div id='red_head'>
      <p id='menu_title' class ='hidden' onclick="toggle_visibility('tog')">  Add your first menu item</p>
    </div>
    <h3 id='menu'>Menu Section</h3>
    <form name='first_prod' id='first_prod' enctype='multipart/form-data' action='testing.php' method='POST' accept-charset='utf-8' >               
      <label id='cat_label' name='cat_label'>Name</label>
      <input type='text' id='cat_name' name='cat_name' value=''>
      <label id='desc_label' name='desc_label'>Description</label>
      <input type='text' id='cat_desc' name='cat_desc' value=''>
    </form>
  </div>
</div>

修改问题后编辑

问题中的代码已扩展，因此 HTML 现在是在循环中生成的。

您现在应该注意仅生成唯一的id值。因此，您可能需要添加 <?=$i?>在几个地方，像这样:

<?php
session_start();
// ....
$i = 1;
while ($output = $fc_sel->fetch_assoc()) {
    $fc_run .= $output['Food_Cat_name'] . $output['Food_Cat_Desc'] . '<br>';
    $_SESSION['Food_Cat_name'] = $output['Food_Cat_name'];
    $_SESSION['Food_Cat_Desc'] = $output['Food_Cat_Desc'];
?>

<div id='first_product<?=$i>'>

<button onclick="toggle_visibility('tog<?=$i>')">Toggle</button>
<div id='tog<?=$i>'>
    <div id='red_head<?=$i>'>

...等等。请注意，在 HTML 输出开始之前 PHP 已关闭。这样做，而不是一个大的 echo 。然后在最后，再次打开 PHP 标签来结束循环:

<?php
}
?>