选中复选框时将类添加到所有其他 div

Question

在底部编辑

TL;DR 我不知道如何将类属性添加到没有我用复选框选择的类的所有 div。

我正在尝试为小型指南列表创建一个排序脚本。所以我的想法是我的 div 标签将附加描述类，例如：

<div class="guide-block WINDOWS UPDATE INSTALL">

“窗口、更新和安装”是“描述”类，仅用于排序目的。侧面带有复选框的列表将允许用户选择与他们需要查找的内容相关的复选框。示例：

<input type="checkbox" id="install"/>
<input type="checkbox" id="update"/>
<input type="checkbox" id="windows"/>

用户选择与他们的搜索相关的框，并且没有从复选框中选择的类的 div 然后将添加一个带有 display: none; 的类里面。这将使不相关的指南消失（理论上）。

我对 java 和 jquery 比较陌生，所以我不确定自己在做什么。我已经从该站点的其他类似问题中拼凑了脚本，以尝试制作我需要的代码。我已经得到了一些工作的代码。它会使具有匹配复选框的 div 在选中时消失。我想要相反的。我希望没有选中复选框的 div 消失。如果我有一个带有 UPDATE 和 INSTALL 的 div，我需要代码来识别它已经选择了一个并且仍然保留。因为现在，如果 div 两者都有，而我选择了一个，它就会消失，因为另一个没有被选中。

$(document).ready(function(){
$('#install').change(function () {
    if (!this.checked)
        $("div.guide-block.install").css("display", "block");
    else
        $("div.guide-block.install").css("display", "none");
});
$('#update').change(function () {
    if (!this.checked)
        $("div.guide-block.update").css("display", "block");
    else
        $("div.guide-block.update").css("display", "none");
});
$('#windows').change(function () {
    if (!this.checked)
        $("div.guide-block.windows").css("display", "block");
    else
        $("div.guide-block.windows").css("display", "none");
});
});

任何帮助将不胜感激。给我一个关于如何做的指南，无论如何。我愿意学习这个，但我用自己的知识碰壁，谷歌搜索不理解。虽然，我不确定我在寻找什么哈。

编辑：我已按照建议重写了代码。遗憾的是这不起作用，但我觉得我更接近了。

$('#install').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.install)').hide();
    }
});

Answer 1

您需要创建一个包含所有选项类的选择器，即windows、update 和install。

为了建立元素之间的关系，我在小案例中使用了 css 类。

<div class="guide-block windows update install">
  1. windows, update, install
</div>

$(document).ready(function() {
  //Select the checkboxes
  var checkboxes = $('.checkboxContainer :checkbox');  
  //bind the change event hanlder
  checkboxes.on('change', function() {    
    //get the checked checkboxes id, It return create an array
    var checkedCssClasses = checkboxes.filter(':checked').map(function() {
      return this.id;
    }).get();
    //For Debugging purpose, 
    console.clear();
    console.log(checkedCssClasses);    
    //Get all guideBlocks
    var guideBlock = $("div#guide-container .guide-block");    
    //Hide all block
    guideBlock.hide();
    //any checkbox is checked
    if (checkedCssClasses.length> 0) {
      //Create the selector for elements      
      checkedCssClasses = '.' + checkedCssClasses.join('.')      
      //Show filtered element
      guideBlock.filter(checkedCssClasses).show();
    }
  });
});

.guide-block {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="guide-container">
  <div class="guide-block windows update install">
    1. windows, update, install
  </div>
  <div class="guide-block windows update">
    2. windows, update
  </div>
  <div class="guide-block install">
    3. install
  </div>
</div>
<div class="checkboxContainer">
  <input type="checkbox" id="install" />Install
  <br>
  <input type="checkbox" id="update" />Update
  <br>
  <input type="checkbox" id="windows" />Windows
</div>

Answer 2

这里不是最迷人的解决方案，但我相信它是最简单的，以促进您对 jQuery 的学习。对我来说，jQuery 非常注重与 CSS 的交互，所以我在 jQuery 和 CSS 之间加入了交互来完成这项工作。

基本上，我们想要的是默认隐藏所有指南块，然后使用 SHOW-CSS 类根据需要显示它们。 SHOW- 类之所以有效，是因为它们具有更高的 CSS“特异性”。

$(document).ready(function() {
  $('#install').change(function () {
      if (this.checked)
          $("div#guide-container").addClass("SHOW-INSTALL");
      else
          $("div#guide-container").removeClass("SHOW-INSTALL");
  });
  $('#update').change(function () {
      if (this.checked)
          $("div#guide-container").addClass("SHOW-UPDATE");
      else
          $("div#guide-container").removeClass("SHOW-UPDATE");
  });
  $('#windows').change(function () {
      if (this.checked)
          $("div#guide-container").addClass("SHOW-WINDOWS");
      else
          $("div#guide-container").removeClass("SHOW-WINDOWS");
  });
});

.guide-block {
  display: none;
}

.SHOW-WINDOWS>.guide-block.WINDOWS {
  display: block;
}
.SHOW-UPDATE>.guide-block.UPDATE {
  display: block;
}
.SHOW-INSTALL>.guide-block.INSTALL {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="guide-container">
  <div class="guide-block WINDOWS UPDATE INSTALL">
    1. windows, update, install
  </div>
  <div class="guide-block WINDOWS UPDATE">
    2. windows, update
  </div>
  <div class="guide-block INSTALL">
    3. install
  </div>
</div>
<input type="checkbox" id="install"/>Install<br>
<input type="checkbox" id="update"/>Update<br>
<input type="checkbox" id="windows"/>Windows