2

私は動的に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 の場合は機能しません。どこが間違っているのか教えてください。

4

7 に答える 7

2

このコードを試してください。

<?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  } ?>
于 2012-11-20T10:33:56.733 に答える
0

これを達成するためにPHPを使用しないでください。jQueryと少しのロジックを使用して、これらのdivを表示および非表示にします。

于 2012-11-20T10:16:40.940 に答える
0

クラス hidden-div{display:none;} を作成し、それを php からクラスに追加してみませんか?

于 2012-11-20T10:27:14.130 に答える
0

これをチェックして 

 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;">';

 ...
于 2012-11-20T10:28:12.393 に答える
0

HTML を修正しelse }て$h++;.

<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>3 つのタグすべてが同じ Javascript 関数test()を呼び出しsetていることに注意してくださいset1。

この状況を改善するにはtest()、パラメーター ( ) を指定して、各タグfunction test(id)に関連付けます。test(<?php echo $h; ?>)<a>

于 2012-11-20T10:28:31.797 に答える
0

これはテストしません。しかし、それを試してみてください:

<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++;
} ?>
于 2012-11-20T10:33:11.540 に答える
0

それを達成するには、このコードを使用する必要があります

$("#div,$div2,#div3").hide();
$("#div,#div2,#div3").show();
于 2012-11-20T10:23:17.150 に答える