jquery - 使用 jquery 和复选框显示/隐藏多个 div

Question

我正在尝试使用各种复选框显示/隐藏多个 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 &gt; &gt;</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 &gt; &gt;</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");
  });
});

假设用户只想查看带有“design”和“copywriting”类的div，它会隐藏顶部示例，因为它还包含类“editing”

基本上我所追求的是允许组合工作的代码，即如果用户选择“设计”和“文案”，它将仅显示具有这两个类的 div，而不显示具有其他类(例如“编辑”)的 div还有

非常复杂和令人沮丧!

Answer 1

您正在将 #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>

• 我删除了 span，因为它是空的并复制了一个唯一 ID，我删除了 anchor 标记，因为它看起来也没什么用。