Question

在底部编辑

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

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

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

＆＃34; windows，更新并安装＆＃34;是＆＃34;描述＆＃34;仅用于排序目的的类。侧面带有复选框的列表将允许用户选择与他们需要查找的内容相关的复选框。示例：

<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>

＆＃13;

$(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();
    }
  });
});

＆＃13;

.guide-block {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

Answer 3

我不确定你究竟在寻找什么，但我在这里理解的是你的解决方案。

$(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");
    }
  });
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="guide-block install">Install</div>
<div class="guide-block update">Update</div>
<div class="guide-block windows">Windows</div>
<input type="checkbox" id="install"/>
<input type="checkbox" id="update"/>
<input type="checkbox" id="windows"/>

Answer 4

以下是您需要做的事情：

Working fiddle

$(document).ready(function() {
  $("input[type='checkbox']").change(function() {
    var chkboxArray = $(" input[type='checkbox']:checked").map(function() {
      return $(this).attr("id");
    }).get();
    $("div.guide-block").hide();
    for (var i = 0; i < chkboxArray.length; i++) {
      $("div.guide-block." + chkboxArray[i]).show();
    }


  });

});

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

Answer 5

这是让它以我想要的方式工作的代码。它没有使用css来隐藏指南，但它在检查时隐藏并显示它们并取消选中复选框。这对我来说已经足够好了！非常感谢@Satpal !!

$(document).ready(function(){
$('#install').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.install)').hide();
    }
    else {
        $('div.guide-block:not(.install)').show();
    }
});
$('#update').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.update)').hide();
    }
    else {
        $('div.guide-block:not(.update)').show();
    }
});
$('#windows').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.windows)').hide();
    }
    else {
        $('div.guide-block:not(.windows)').show();
    }
});
});

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

5 个答案: