我正在写一份有关餐厅清单的HTML，我希望用户有可能在当天开放餐厅。
例如，我将一家餐厅放入Div，So 5 Div for 5餐厅。
我有一个复选框可以允许在标记时隐藏餐厅。
但是，当标记复选框时使用同一闭幕日(与系统日期相对应的关闭日，与系统日期相对应的日期(，我如何处理所有DIVS？
在我看来，我有一篇代码，即在标记复选框时，变量xx将具有白天的值z，并且变量yy的值将具有" display：none;"。
有什么建议？
在下面的示例中，假设我们在星期一，我将标记复选框和餐厅1、4和5将不会显示
<div id="restaurant 1" style=""> <!-- main div for restaurant 1 -->
......... <!-- closed on monday, so value 1 from getday() -->
</div>
<div id="restaurant 2" style=""> <!-- main div for restaurant 2 -->
......... <!-- closed on saturday, so value 6 from getday() -->
</div>
<div id="restaurant 3" style=""> <!-- main div for restaurant 3 -->
......... <!-- closed on friday, so value 5 from getday() -->
</div>
<div id="restaurant 4" style=""> <!-- main div for restaurant 4 -->
......... <!-- closed on monday, so value 1 from getday() -->
</div>
<div id="restaurant 5" style=""> <!-- main div for restaurant 5 -->
......... <!-- closed on monday, so value 1 from getday() -->
</div>
好吧，我找到了获得我变成结果的方法。
请检查是否还可以。
它需要添加DIV类；在示例中，我添加text_container 当天的数量(周日的text_container0 text_container0在周六关闭到text_container6(
TKS到Alexican进行hide/Show方法
Mudassar Khan进行检查/取消选中复选框
W3SCHOOL几天选择。
因此，TKS对他们来说，我编写了以下代码：
html
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript">
//<![CDATA[
window.__cfRocketOptions = {byc:0,p:0,petok:"4e61817aa8cc99a086afc531fd10f5ff4e7b528a-1518422018-1800"};
//]]>
</script>
<script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/b7ef205d/cloudflare-static/rocket.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<label for="choice">
<input type="checkbox" id="choice" />
On OFF
</label>
<div id="container_2">
<p class="info">TEST Restaurant</p>
<div class="text_container1">
<div class="text_container">
<h2>Restaurant 1</h2>
<div>
<p>Closed on Monday ... 1</p>
</div>
</div>
</div>
<div class="text_container0">
<div class="text_container">
<h2>Restaurant 2</h2>
<div>
<p>Closed on Sunday --- 0</p>
</div>
</div>
</div>
<div class="text_container7">
<div class="text_container">
<h2>Restaurant 3</h2>
<div>
<p>Closed on Saturday ... 7</p>
</div>
</div>
</div>
<div class="text_container1">
<div class="text_container">
<h2>Restaurant 4</h2>
<div>
<p>Closed on Monday ... 1</p>
</div>
</div>
</div>
</div>
<script type="text/rocketscript" data-rocketsrc="https://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/rocketscript">
$(document).ready(function(){
$('.text_container').addClass("visible");
<!-- var d = new Date();-->
<!-- var n = d.getDay(); -->
$("#choice").click(function () {
if ($("#choice").is(":checked")) {
switch (new Date().getDay()) {
case 0:
$('.text_container0').removeClass("visible").addClass("hidden");
break;
case 1:
$('.text_container1').removeClass("visible").addClass("hidden");
break;
case 2:
$('.text_container2').removeClass("visible").addClass("hidden");
break;
case 3:
$('.text_container3').removeClass("visible").addClass("hidden");
break;
case 4:
$('.text_container4').removeClass("visible").addClass("hidden");
break;
case 5:
$('.text_container5').removeClass("visible").addClass("hidden");
break;
case 6:
$('.text_container6').removeClass("visible").addClass("hidden");
}
<!-- $('.text_container1').removeClass("visible").addClass("hidden"); -->
} else {
$('.text_container0').removeClass("hidden").addClass("visible");
$('.text_container1').removeClass("hidden").addClass("visible");
$('.text_container2').removeClass("hidden").addClass("visible");
$('.text_container3').removeClass("hidden").addClass("visible");
$('.text_container4').removeClass("hidden").addClass("visible");
$('.text_container5').removeClass("hidden").addClass("visible");
$('.text_container6').removeClass("hidden").addClass("visible");
};
});
});
</script>
</body>
更多两个简单的CSS线
.visible>div {
display: block;
}
.hidden>div {
display: none
}