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

Hide/Show toggle echo results in php

本文关键字:回声 结果 显示 php 隐藏      更新时间:2023-09-26

我正试图将echo'd的结果从表中切换出来,但我运气不好。我在HTML中尝试过同样的代码,它运行得很好。我已经为此工作了一段时间,想知道是否有人能为我指明正确的方向。

我累了什么

  • 在php echo中添加javascript
  • 向id添加计数器,使其在循环中唯一
  • 放置回波的每一行都会产生回波(");标签

添加一个计数器,使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> 

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

然后在PHP中,删除<?php echo。只需将HTML放在PHP中即可。echo只会使事情变得复杂。如果您在HTML中需要动态数据,只需在该位置使用<?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>'>

请注意,PHP在HTML输出开始之前已经关闭。执行此操作,而不是使用大型echo。然后在结束时,再次打开PHP标签以结束循环:

<?php
}
?>

请修改您的代码

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>
    " 
    <button value='tog' onclick='toggle_visibility(this)'>Toggle</button>

只需使用"this"并将值分配给其工作的按钮

试试这个;)

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