我正在尝试使用各种复选框显示/隐藏多个div。我的目标是CMS在用户选择类别/类别时提供的div类。
这适用于一个类但是只要多个类被赋予一个div它们就会发生冲突并且它会使整个事情混乱......
复选框的HTML
<ul class="checkboxes">
<li class="dropper"><a href="#"><label>Project Management<input id="box1" type="checkbox" checked="checked" name="checkbox-01" /><span id="box1"></span></label></a></li>
<li><a href="#"><label>Copywriting<input id="box2" type="checkbox" checked="checked" name="checkbox-02" /><span id="box2"></span></label></a></li>
<li><a href="#"><label>Design<input id="box3" type="checkbox" checked="checked" name="checkbox-03" /><span id="box3"></span></label></a></li>
<li><a href="#"><label>Editing<input id="box4" type="checkbox" checked="checked" name="checkbox-04" /><span id="box4"></span></label></a></li>
<li><a href="#"><label>Multimedia<input id="box5" type="checkbox" checked="checked" name="checkbox-05" /><span id="box5"></span></label></a></li>
<li><a href="#"><label>Advertising<input id="box6" type="checkbox" checked="checked" name="checkbox-06" /><span id="box6"></span></label></a></li>
<li><a href="#"><label>Consultancy<input id="box7" type="checkbox" checked="checked" name="checkbox-07" /><span id="box7"></span></label></a></li>
<li class="dropper"><a href="#"><span id="reset-toggles" class="reset">Reset</span></a></li>
</ul>
我要显示/隐藏的div的HTML
<div class="box-shadow copywriting design editing">
<div class="caption">
<h3>Scottish Hosteler Magazine</h3>
<h4>Scottish Youth Hostel Association</h4>
<p><a href="case-study-L1.php">Find out more > ></a></p>
</div>
<img src="img/tile1.jpg"/>
</div>
<div class="box-shadow copywriting design">
<div class="caption">
<h3>Scottish Dental Magazine</h3>
<h4>Scottish Dental</h4>
<p><a href="case-study-L2.php">Find out more > ></a></p>
</div>
<img src="img/tile2.jpg"/>
</div>
和jQuery
$(document).ready(function() {
$("#reset-toggles").click(function() {
$("input[type=checkbox]").attr("checked", !0);
}), $("#box1").click(function() {
$(".projman").fadeToggle("fast", "linear");
}), $("#box2").click(function() {
$(".copywriting").fadeToggle("fast", "linear");
}), $("#box3").click(function() {
$(".design").fadeToggle("fast", "linear");
}), $("#box4").click(function() {
$(".editing").fadeToggle("fast", "linear");
}), $("#box5").click(function() {
$(".multimedia").fadeToggle("fast", "linear");
}), $("#box6").click(function() {
$(".advertising").fadeToggle("fast", "linear");
});
});
所以说用户想要查看带有“设计”和“文案”类的div只会隐藏顶部的例子，因为它还包含“编辑”类
基本上我所追求的是允许组合工作的代码，即如果用户选择“设计”和“文案”，它将仅显示具有这两个类的div而不显示具有另一个类的那些，例如“编辑”藏汉
非常复杂和令人沮丧！
答案 0 :(得分：2)
您要将#box1，#box2等的唯一ID分配给HTML中禁止的多个元素，使用要对多个元素应用引用的类。
在您的情况下，我假设您要将jQuery处理程序应用于复选框元素，请尝试以下操作：
<li class="dropper">
<label for="box1">Project Management</label>
<input id="box1" type="checkbox" checked="checked" name="checkbox-01">
</li>
答案 1 :(得分：0)
过滤，遇到schmilter
jquery的：
var puts = $('.checkboxes input[type=checkbox]');//checkboxes
var cans = $('.box-shadow');//content blocks
var schmilt = true;//set false for filtering instead of schmiltering
function schmilter() {
puts.each(function() {//get checkboxes
var cl = $(this).attr('id');//get id
if (this.checked) { $('.'+cl).addClass('show'); }//if checked show
else { $('.'+cl).addClass('hide'); }//if !checked hide
if (!$('.'+cl).length) { $(this).prop('checked',false).parent('li').hide(); }//if class doesn't exist uncheck/hide invalid options
});
cans.each(function() {//get all content blocks
if(schmilt) {//if schmilt
if($(this).hasClass('hide')) { $(this).fadeOut('fast').removeClass('hide show'); }//hide
else if ($(this).hasClass('show')) { $(this).fadeIn('fast').removeClass('show'); }//show
} else {//if !schmilt
if($(this).hasClass('show')) { $(this).fadeIn('fast').removeClass('hide show'); }//show
else if ($(this).hasClass('hide')) { $(this).fadeOut('fast').removeClass('hide'); }//hide
}
});
}
schmilter();//initial run
puts.on('change', function() { schmilter(); });//on change run schmilter
$('#reset').on('click', function() {//click reset
puts.prop('checked', true);//check all
schmilter();//run schmilter
});
这将查看所有选中/未选中的复选框，指定hide和show的类。如果容器包含hide，则会隐藏该容器，并移除hide和show。如果它只有show，则会显示，并且show已被删除。
当您设置schmilt = false时，它将执行相反的操作并提供典型的过滤功能。
如果它们不适用于任何现有容器，它也会删除选择。
我重新设计了html以使其更有意义，就像@scrowler提到的那样，但更进一步。我在复选框和内容之间添加了相应的ID /类。因此，如果复选框的ID为#edit，则相应的内容容器都具有.edit
HTML：
<ul class="checkboxes">
<li class="dropper">
<label for="projman">Project Management</label>
<input id="projman" type="checkbox" checked="checked" name="projman" />
</li>
<li>
<label for="copywriting">Copywriting</label>
<input id="copywriting" type="checkbox" checked="checked" name="copywriting" />
</li>
<li>
<label for="design">Design</label>
<input id="design" type="checkbox" checked="checked" name="design" />
</li>
<li>
<label for="editing">Editing</label>
<input id="editing" type="checkbox" checked="checked" name="editing" />
</li>
<li>
<label for="multimedia">Multimedia</label>
<input id="multimedia" type="checkbox" checked="checked" name="multimedia" />
</li>
<li>
<label for="advertising">Advertising</label>
<input id="advertising" type="checkbox" checked="checked" name="advertising" />
</li>
<li>
<label for="consultancy">Consultancy</label>
<input id="consultancy" type="checkbox" checked="checked" name="consultancy" />
</li>
<li class="dropper"><a href="javascript:void(0);" id="reset">Reset</a>
</li>
</ul>
<div class="box-shadow copywriting design editing">
<div class="caption">
<h3>Scottish Hosteler Magazine</h3>
<h4>Scottish Youth Hostel Association</h4>
<p><a href="case-study-L1.php">Find out more > ></a>
</p>
</div>
<img src="img/tile1.jpg" />
</div>
<div class="box-shadow copywriting design">
<div class="caption">
<h3>Scottish Dental Magazine</h3>
<h4>Scottish Dental</h4>
<p><a href="case-study-L2.php">Find out more > ></a>
</p>
</div>
<img src="img/tile2.jpg" />
</div>