javascript 在 PHP 中动态显示/隐藏 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13470977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide Div Dynamically in PHP
提问by Harshal Mahajan
i have an array which generates The Div dynamically.Now i want to hide & show the div and 1 div should be shown at a time and to show the next div the user must be click on button.something like this:
我有一个动态生成 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++; } } ?>
Now using the above code i can able to hide and show the 2 div but in the case of 3 div it is not working,please let me know where i am doing wrong.
现在使用上面的代码我可以隐藏和显示 2 div 但在 3 div 的情况下它不起作用，请让我知道我做错了什么。
采纳答案by VibhaJ
Try this code.
试试这个代码。
<?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 } ?>
回答by toxicate20
Dont use PHP to achieve this. Use jQuery and a bit of logic to show and hide those divs.
不要使用 PHP 来实现这一点。使用 jQuery 和一些逻辑来显示和隐藏这些 div。
回答by Daxen
You have to use this code for achieve that one
你必须使用这个代码来实现那个
$("#div,$div2,#div3").hide();
$("#div,#div2,#div3").show();
回答by ka_lin
Why don`t you make a class hidden-div{display:none;} and from php add it to the class?
为什么不创建一个类 hidden-div{display:none;} 并从 php 中将它添加到类中？
回答by pliashkou
Check this
检查这个
var current = 0;
function test() {
document.getElementById("set"+current).style.display="none";
current++;
document.getElementById("set"+current).style.display="block";
}
and
和
...
foreach($sets as $set){
if($h==0){
echo '<div id="set0">';
else
echo '<div id="set<?php echo $h;?>" style="display:none;">';
...
回答by irrelephant
Assuming you fix your HTML and put your closing else}before the $h++;, your PHP code will generate HTML (and Javascript) that is fixed and looks something like this:
假设您修复了 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>
Notice that all three <a>tags call the same Javascript function test(), which alters the divs setand set1and nothing else.
注意，这三个<a>标签调用同一个JavaScript函数test()，它改变的divset并set1没有别的。
To remedy this situation, you can give test()a parameter (function test(id)) and associate test(<?php echo $h; ?>)with each <a>tag.
为了解决这种情况，您可以提供test()一个参数 ( function test(id)) 并test(<?php echo $h; ?>)与每个<a>标签相关联。
回答by M Rostami
this doesn't test . but try it :
这不测试。但试试吧：
<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++;
} ?>
