在 PHP 中动态显示/隐藏 Div答案

【问题标题】：Show/hide Div Dynamically in PHP在 PHP 中动态显示/隐藏 Div
【发布时间】：2012-11-08 09:19:51
【问题描述】：

我有一个动态生成 Div 的数组。现在我想隐藏和显示 div，一次应该显示 1 个 div，并显示下一个 div，用户必须点击按钮。像这样：

<?php $h=0;?>
<script stype="textjavascript">
        function test() {
          document.getElementById("set").style.display="none";

          document.getElementById("set<?php echo $h+1; ?>").style.display="block";

          }
</script>
<?php
foreach($sets as $set){ 
if($h==0)
{
?>
<div id="set">
</php } else { ?>
<div id="set<?php echo $h;?>" style="display:none;">

<p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<?php $h++; } } ?>

现在使用上面的代码我可以隐藏和显示 2 div，但在 3 div 的情况下它不起作用，请告诉我我做错了什么。

【问题讨论】：

标签： php javascript show-hide

【解决方案1】：

不要使用 PHP 来实现这一点。使用 jQuery 和一些逻辑来显示和隐藏这些 div。

【讨论】：

这不是一个真正的答案。他已经在使用 javascript 来隐藏/显示元素。他正在通过 PHP 输出 div。为什么通过 javascript 输出它们会使这更合乎逻辑？
是的，我也这么认为，java脚本足以实现这个功能，我期待任何合乎逻辑的想法来做到这一点。

【解决方案2】：

您必须使用此代码来实现这一目标

$("#div,$div2,#div3").hide();
$("#div,#div2,#div3").show();

【讨论】：

【解决方案3】：

为什么不创建一个类 hidden-div{display:none;} 并从 php 将其添加到类中？

【讨论】：

【解决方案4】：

检查一下

 var current = 0;
 function test() {
      document.getElementById("set"+current).style.display="none";
      current++;
      document.getElementById("set"+current).style.display="block";
 }

和

...
foreach($sets as $set){ 
if($h==0){ 
  echo '<div id="set0">';
else 
  echo '<div id="set<?php echo $h;?>" style="display:none;">';

 ...

【讨论】：

【解决方案5】：

假设您修复了 HTML 并将关闭的 else } 放在 $h++; 之前，您的 PHP 代码将生成已修复的 HTML（和 Javascript），看起来像这样：

<script>
    function test() {
        document.getElementById("set").style.display="none";
        document.getElementById("set1").style.display="block";
    }
</script>

<div id="set"></div>
<div id="set1" style="display:none;">
    <p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<div id="set2" style="display:none;">
    <p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<div id="set3" style="display:none;">
    <p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>

请注意，所有三个 <a> 标记都调用相同的 Javascript 函数 test()，这会改变 div set 和 set1，仅此而已。

要纠正这种情况，您可以给test() 一个参数（function test(id)）并将test(<?php echo $h; ?>) 与每个<a> 标记相关联。

【讨论】：

【解决方案6】：

这不会测试。但试试看：

<script stype="textjavascript">
        function test(i) {
          document.getElementById("set").style.display="none";

          document.getElementById("set"+i).style.display="block";

          }
</script>

<?php
foreach($sets as $set){ 
   if($h==0)
   {?>
     <div id="set">
      <?php 
   } else { ?>
       <div id="set<?php echo $h;?>" style="display:none;">
       <p><a class="continue" href="#" onclick="test(<?php echo (($h)==count($sets)?'':$h+1);?>)">Continue</a></p>
       </div>
  <?php  
   }
$h++;
} ?>

【讨论】：

【解决方案7】：

试试这个代码。

<?php
$sets = array('one','two','three','four');
?>
<script stype="textjavascript">
    var current = 0;
    var total = <?php echo count($sets); ?>;
    function test() {
        for(var i=0;i<total;i++)
        {
            document.getElementById("set"+i).style.display="none";
        }
        current++;
        document.getElementById("set"+current).style.display="block";
    }
</script>
<?php
foreach($sets as $key=>$set){ 
?>
<div <? if($key>0){ ?> style="display: none" <? } ?> id="set<?php echo $key; ?>">
    == <?php echo $set; ?> ==
<p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<?php  } ?>

【讨论】：