我有一个网站,它使用php在页面上呈现模块。目前,该网站在显示哪些模块方面所做的唯一判断是你是否登录。如果你已经登录,它会显示所有的,如果没有,只显示少数。我一直在尝试允许用户使用复选框筛选出模块,但我的代码不起作用。我可能错过了一些简单的东西,所以我希望有一双新的眼睛能发现我错过了什么。这是我迄今为止所拥有的。
<form >
<input type="checkbox" name="Categories" value="Categories"> example1<br>
<input type="checkbox" name="Categories1" value="Categories1"> example2<br>
<input type="submit" value="Submit">
</form>
<?php
if (isset($_POST['Categories']))
{
$variable = 1;
}
elseif (isset($_POST['Categories1']))
{
$variable = 2;
}
else
{
echo "You haven't picked anything!";
}
?>
<?php switch($variable):
case 1: ?>
<div class="col-md-4 module" id="exampleID"> example1 </div>
<div class="col-md-4 module" id="exampleID"> example2 </div>
<?php break;?>
<?php case 2: ?>
<div class="col-md-4 module" id="exampleID"> example3 </div>
<div class="col-md-4 module" id="exampleID"> example4 </div>
<?php break;?>
<?php default;?>
<div class="col-md-4 module" id="exampleID"> example1 </div>
<div class="col-md-4 module" id="exampleID"> example2 </div>
<div class="col-md-4 module" id="exampleID"> example3 </div>
<div class="col-md-4 module" id="exampleID"> example4 </div>
<?php endswitch;?>
我遇到的问题是它总是显示一切。不仅是应该有的4,还有4加上其他箱子里的所有。我想要的是,如果我选中第一个框,那么页面将显示:
example1
example2
如果我勾选了第二个框:
example3
example4
如果我没有勾选任何框:
example1
example2
example3
example4
希望你们能帮我。
编辑-
这是我目前得到的输出:
Example1
Example2
Example3
Example4
Example1
Example2
Example3
Example4
<form method="post">
这应该会有所帮助。如果你不命名一个方法,它就是get,而不是post。
为了更好地读取/清理代码,您应该在switch语句中使用echo。
回答:
下面是我最终想出的代码,用来做我想做的事情。我还添加了更新的复选框。希望这能帮助其他人。
JQuery:
<script type="text/javascript">
$(document).ready( function() {
<!-- Sets All The Modules To Show By Default -->
startup();
$(".CategorySelector").click( function() {
//$(this).value
//Hide All Modules
$('div.module').each( function() {
$(this).hide();
})
var chooseCat = 0;
//Loop through category selectors and show modules
$("input.CategorySelector").each( function() {
if ($(this).is(':checked')) {
chooseCat++;
showCategory($(this).val())
}
})
if (chooseCat == 0){
startup();
}
})
});
function startup() {
$('div.module').each( function() {
$(this).hide();
})
$('div.module').each( function() {
$(this).show();
})
}
function showCategory(Category) {
var selector = '[categories~="'+Category+'"]';
$(selector).each( function() {
$(this).show();
})
}
</script>
复选框:
<input type="checkbox" class="CategorySelector" value="value1">
Example1<br>
<input type="checkbox" class="CategorySelector" value="value2">
Example2<br>
<input type="checkbox" class="CategorySelector" value="value3">
Example3<br>
<input type="checkbox" class="CategorySelector" value="value4">
Example4<br>
我想尝试做的一件事是将复选框嵌入到iframe中,然后像滑动选项卡一样创建,这样导航就不会受到干扰。然而,首先,我不知道如何从iframe调用数据。其次,我不知道如何做滑动动画。值得期待的事情:(