如何使用jQuery在三个或更多条件下显示和隐藏元素？
Posted
技术标签:
【中文标题】如何使用jQuery在三个或更多条件下显示和隐藏元素？【英文标题】：How to show and hide an element in three or more conditions using jQuery? 【发布时间】：2016-01-10 20:55:02 【问题描述】：$(document).ready(function()
$(".counter-alert-box").hide();
$('.scheme-checkbox').on("click", function ()
$('.scheme-checkbox').is('checked', this.checked);
$('.counter-alert-box').show();
);
//Alert Box Functionality : Show Alert Box on - first Checked
$(".close-counter-box1").click(function ()
$(".counter-alert-box").hide();
);
//Alert Box Functionality : Removes Selected Scheme
$(".selected-scheme .close-icon-scheme").click(function ()
$(this).parents('.selected-scheme').remove();
);
);input[type=checkbox]
position: absolute;
right:20px;
top:50px;
.counter-alert-box
width:300px;
height:250px;
background-color:lightgray;
position:fixed;
left:30%;
bottom:10px;
.close-counter-box1
position:absolute;
right:3px;
top:1px;
padding:3px;
border:gray;
background-color:lightgray;
color:#000;
.close-counter-box1:hover
background-color:lightgreen;
color:red;
.selected-scheme
.close-icon-scheme
color: #6C6C6C;
/*background-color: #C0C0C0;*/
font-size: 10px;
text-align: center;
vertical-align: middle;
float: left;
margin-right: 7px;
padding:3px;
.close-icon-scheme:hover
color: #181818;
background-color: #FFF;
cursor:pointer;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<fieldset>
<legend>Scheme 1</legend>
<p>Scheme 1 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
<legend>Scheme 2</legend>
<p>Scheme 2 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
<legend>Scheme 3</legend>
<p>Scheme 1 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
<legend>Scheme 4</legend>
<p>Scheme 4 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<div class="counter-alert-box">
<span class='close-counter-box1'>X</span>
<div class='schemes-wrapper'>
<div class='selected-scheme'>Scheme 1
<span class='close-icon-scheme'>X</span>
</div>
<div class='selected-scheme'>Scheme 2
<span class='close-icon-scheme'>X</span>
</div>
<div class='selected-scheme'>Scheme 3
<span class='close-icon-scheme'>X</span>
</div>
<div class='selected-scheme'>Scheme 4
<span class='close-icon-scheme'>X</span>
</div>
</div>
</div>
</body>
</html>我正在使用 php 并使用 foreach 循环从数据库中获取数据。
所以在 fieldset 上，它的内容来自数据库。我正在使用 jQuery。
我想在 Counter-alert-box 类上工作，以根据以下情况显示或隐藏，但无法这样做，请考虑以下情况并给出解决方案：
counter-alert-box 应该是“隐藏”：
-
当所有具有类 scheme-checkbox 的复选框时，将取消选中。
当所有选定的方案从 div 类方案包装器中删除时。
当点击 close-counter-box1 时
counter-alert-box 应该在至少 1 个复选框被选中时“显示”。
【问题讨论】：
【参考方案1】：请检查下面的小提琴，看看。 我想这会对你有所帮助...
<fieldset>
<legend>Scheme 1</legend>
<p>Scheme 1 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
<legend>Scheme 2</legend>
<p>Scheme 2 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
<legend>Scheme 3</legend>
<p>Scheme 1 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
<legend>Scheme 4</legend>
<p>Scheme 4 Details</p>
<input type="checkbox" class="scheme-checkbox">
</fieldset>
<div class="counter-alert-box"> <span class='close-counter-box1'>X</span>
<div class='schemes-wrapper'>
<div class='selected-scheme'>Scheme 1 <span class='close-icon-scheme'>X</span>
</div>
<div class='selected-scheme'>Scheme 2 <span class='close-icon-scheme'>X</span>
</div>
<div class='selected-scheme'>Scheme 3 <span class='close-icon-scheme'>X</span>
</div>
<div class='selected-scheme'>Scheme 4 <span class='close-icon-scheme'>X</span>
</div>
</div> <span id="cnt"></span>
</div>
$(document).ready(function ()
$(".counter-alert-box").hide();
$('.scheme-checkbox:checkbox').change(function ()
if ($(':checkbox:checked').length > 0)
$('.counter-alert-box').show();
else
$('.counter-alert-box').hide();
);
//Alert Box Functionality : Show Alert Box on - first Checked
$(".close-counter-box1").click(function ()
$(".counter-alert-box").hide();
$('.scheme-checkbox').attr('checked', false);
);
//Alert Box Functionality : Removes Selected Scheme
$(".close-icon-scheme").click(function ()
$(this).parents('.selected-scheme').remove();
if (!$('.selected-scheme').length)
$(".counter-alert-box").hide();
$('.scheme-checkbox').attr('checked', false);
);
);
input[type=checkbox]
position: absolute;
right:20px;
top:50px;
.counter-alert-box
width:300px;
height:250px;
background-color:lightgray;
position:fixed;
left:30%;
bottom:10px;
.close-counter-box1
position:absolute;
right:3px;
top:1px;
padding:3px;
border:gray;
background-color:lightgray;
color:#000;
.close-counter-box1:hover
background-color:lightgreen;
color:red;
.selected-scheme
.close-icon-scheme
color: #6C6C6C;
/*background-color: #C0C0C0;*/
font-size: 10px;
text-align: center;
vertical-align: middle;
float: left;
margin-right: 7px;
padding:3px;
.close-icon-scheme:hover
color: #181818;
background-color: #FFF;
cursor:pointer;
JSFiddle
【讨论】：
@MasterProns：不客气。请将其标记为答案并帮助其他人...谢谢。 你能告诉我如何标记它吗？我是新使用这个网站。还有一件事将有助于其他人在我的 css 中进行一些更改，即复选框 css，即位置：相对而不是绝对。我想做得更好。 @MasterProns：我的答案左侧会有一个灰色的勾号。单击它，它将被标记为答案。实际上，将 4 个具有相同类“方案复选框”的复选框（对我而言）意义较小，这也将与一个复选框具有相同的智能...如果您可以更详细地解释该场景，那么我可以帮你... 只要在 css 中做：input[type=checkbox] position: absolute; 供其他人理解。并且还希望仅对具有类 'scheme-checkbox' 的复选框产生相同的效果，因为 ':checkbox' 剂量适用于该页面的具有类 'scheme-checkbox' 的其他复选框。如果可能的话，那么只是建议............感谢您的帮助以上是关于如何使用jQuery在三个或更多条件下显示和隐藏元素？的主要内容，如果未能解决你的问题，请参考以下文章