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

我试图切换结果，但我没有运气。 我曾在HTML中尝试过相同的代码，效果非常好。 我已经为此工作了一段时间，不知道是否有人能给我指出正确的方向

我累了什么

• 在php echo中添加javascript
• 向id添加计数器，使其在循环中唯一
• 将回波的每一行放入回波（“”）；标签

添加计数器，使循环上的id唯一

PHP

$i=1；
而（$output=$fc\u sel->fetch\u assoc（））{
$fc_run.=$output['Food_Cat_name']。$output['Food_Cat_Desc']。
'；
$\u会话['Food\u Cat\u name']=$output['Food\u Cat\u name']；//呼出产品名称
$\u SESSION['Food_Cat_Desc']=$output['Food_Cat_Desc']；//回显产品描述
回声“
切换
添加第一个菜单项
菜单区
名称
描述
";  
}
}

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> 

//将整个div转换为toggle
功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display='block'| | e.style.display==''）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

请修改您的代码

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>

    " 

echo”
切换
添加第一个菜单项
菜单区
名称
描述
" 

请修改您的代码

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>

    " 

echo”
切换
添加第一个菜单项
菜单区
名称
描述
" 

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

然后在PHP中，删除

。但到目前为止，我还没有在您的HTML中看到这些：它是静态的

在两处进行了更改后，下面是一个工作片段：

//将整个div转换为toggle
功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display='block'| | e.style.display==''）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

切换
添加第一个菜单项

菜单区
名称
描述

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

然后在PHP中，删除

。但到目前为止，我还没有在您的HTML中看到这些：它是静态的

在两处进行了更改后，下面是一个工作片段：

//将整个div转换为toggle
功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display='block'| | e.style.display==''）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

切换
添加第一个菜单项

菜单区
名称
描述

切换

只需使用“this”并为按钮的工作状态赋值

切换

只需使用“this”并为其工作按钮赋值（试试这个；）

试试这个；）


您混淆了java和javascript，甚至标签描述也提到了这一点it@Mihai是的，你是对的，我刚才注意到了。我已经做了修改：
“toggle\u visibility（\'tog'）”
：你需要像这样在函数中转义char:
“toggle\u visibility（\'tog'）”
@VincentG我忘了提到我也厌倦了。与循环代码和浏览器中呈现的HTML共享代码，在chrome加载页面中获得类似的效果
Ctrl+u
；您混淆了java和javascript，甚至标签描述也提到了这一点it@Mihai是的，你是对的，我刚才注意到了。我已经做了修改：
“toggle\u visibility（\'tog'）”
：你需要像这样在函数中转义char:
“toggle\u visibility（\'tog'）”
@VincentG我忘了提到我也厌倦了。与循环代码和浏览器中呈现的HTML共享代码，在chrome加载页面中获得类似的效果
Ctrl+u
；有没有办法绕过单引号和双引号的问题？我问这个问题的原因是因为我可以回显数据，在我的echo中我使用了双引号，使用带有echo标记的双引号与echo的双引号冲突。如果这样做有意义，请在需要的地方使用PHP
echo
。不要在HTML的很长一段中使用它。HTML应该放在PHP文件的
之外。这很有帮助。但我发现事实上我没有在多哥的末尾加$i。当然，我不能说关于$I的任何事情，因为它不在你最初的问题中。现在我添加了一个关于这一点的部分。谢谢。是的，我没有意识到这是个问题。但是谢谢你，有没有办法绕过单引号和双引号的问题？我问这个问题的原因是因为我可以在我的ech中回显数据
    <button value='tog' onclick='toggle_visibility(this)'>Toggle</button>

<?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++;
}
?>