我有一个动态生成The Div的数组。现在我要隐藏&显示div和1 div应该一次显示并显示下一个div,用户必须单击button.something:
<?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的情况下它不起作用,请让我知道我在哪里做错了。
答案 0 :(得分: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 } ?>
答案 1 :(得分:0)
不要使用PHP来实现这一目标。使用jQuery和一些逻辑来显示和隐藏这些div。
答案 2 :(得分:0)
您必须使用此代码才能实现那个
$("#div,$div2,#div3").hide();
$("#div,#div2,#div3").show();
答案 3 :(得分:0)
为什么不让一个类hidden-div {display:none;}并从php添加到类中?
答案 4 :(得分: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;">';
...
答案 5 :(得分:0)
假设您修复了HTML并将结束else
}
放在$h++;
之前,您的PHP代码将生成已修复的HTML(和Javascript),如下所示:< / p>
<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 :(得分: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++;
} ?>