javascript - 根据复选框选择显示图像

Question

我正在尝试创建一系列不同的复选框，这些复选框应根据所选内容显示内容。到目前为止，我设法创建了显示/隐藏链接到每个复选框的不同文本。

我现在想根据所做的选择显示/隐藏单个图像。如何解决这个问题？创建一个函数来计算复选框，然后显示图像。像这样的东西：

如果您选择 1-3 个框显示第一张图像，则隐藏所有其他图像。如果选择 4-6 显示第二张图像，则隐藏所有其他图像。如果选择 7-9 显示第三张图像，则隐藏所有其他图像。如果选择全部显示第四张图像，则隐藏所有其他图像。

选择的顺序没有区别。我只需要计算已经做出的选择的数量。

CSS：

.categorya,
.categoryb,
.categoryc,
.categoryd,
.categorye,
.categoryf,
.categoryg,
.categoryh,
.categoryi {
    display: none;
    font-size: 13px;
    color: #000000;
    font-family: sans-serif;
}

HTML：

<input id="filter-categorya" class="js-toggler" type="checkbox" value="categorya">
<label for="filter-categorya">Category A
</label>

<input id="filter-categoryb" class="js-toggler" type="checkbox" value="categoryb">
<label for="filter-categoryb">Category B
</label>

<input id="filter-categoryc" class="js-toggler" type="checkbox" value="categoryc">
<label for="filter-categoryc">Category C
</label>

<input id="filter-categoryd" class="js-toggler" type="checkbox" value="categoryd">
<label for="filter-categoryd">Category D
</label>

<input id="filter-categorye" class="js-toggler" type="checkbox" value="categorye">
<label for="filter-categorye">Category E
</label>

<input id="filter-categoryf" class="js-toggler" type="checkbox" value="categoryf">
<label for="filter-categoryf">Category F
</label>

<input id="filter-categoryg" class="js-toggler" type="checkbox" value="categoryg">
<label for="filter-categoryg">Category G
</label>

<input id="filter-categoryh" class="js-toggler" type="checkbox" value="categoryh">
<label for="filter-categoryh">Category H
</label>

<input id="filter-categoryi" class="js-toggler" type="checkbox" value="categoryi">
<label for="filter-categoryi">Category I</label>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryc">C</div>
<div class="categoryd">D</div>
<div class="categorye">E</div>
<div class="categoryf">F</div>
<div class="categoryg">G</div>
<div class="categoryh">H</div>
<div class="categoryi">I</div>

<h1>Images:</h1>

<div>
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=First+image">
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=Second+image">
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=Third+image">
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=Fourth+image">
</div>

JS：

$('input').click(function() {
    var category = $(this).val();
    if (!$(this).attr('checked')) $('.' + category).hide();
    else $('.' + category).show();
});

代码片段

标签： javascriptjqueryhtmlcount

Answer 1

这是下面的一种方法，但你的逻辑没有意义......你只有9复选框，所以'third image' === 7 - 9会'fourth image' === 'all selected'重叠。

即这个案子...

} else if (selected.length === images.length) {
   hideImagesExcept(3)
}

永远不会被调用。

$(document).ready(function (){
  var options = $('input.js-toggler'),
      images = $('.js-toggle-image');

  $('input').click(function() {
      var category = $(this).val();
      if (!$(this).attr('checked')) $('.' + category).hide();
      else $('.' + category).show();

      var selected = options.filter(function(){
          return this.checked === true;
      })

      if (selected.length === 0) {
        images.hide();
      } else if (selected.length > 0 && selected.length < 4) {
         hideImagesExcept(0)
      } else if (selected.length > 3 && selected.length < 7) {
         hideImagesExcept(1)
      } else if (selected.length > 6 && selected.length < 10) {
         hideImagesExcept(2)
      } else if (selected.length === images.length) {
         hideImagesExcept(3)
      }
   });

   function hideImagesExcept(index) {
      var hideThese = images.filter(function (){
         return images.eq(this) !== index
      })
      hideThese.hide()
      images.eq(index).show()
   }
})

.categorya, .categoryb, .categoryc, .categoryd, .categorye, .categoryf, .categoryg, .categoryh, .categoryi {
    display:none;
    font-size:13px;
    color:#000000;
    font-family:sans-serif;
}
.js-toggle-image {
  display:none;
}
p.info{
    padding:30px 20px 0 20px;
    color:#000;
    font-family:sans-serif;
    font-size:13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="filter-categorya" class="js-toggler" type="checkbox" value="categorya"> <label for="filter-categorya">Category A
</label><br><input id="filter-categoryb" class="js-toggler" type="checkbox" value="categoryb"><label for="filter-categoryb">Category B
</label><br><input id="filter-categoryc" class="js-toggler" type="checkbox" value="categoryc"><label for="filter-categoryc">Category C
</label><br><input id="filter-categoryd" class="js-toggler" type="checkbox" value="categoryd"><label for="filter-categoryd">Category D
</label><br><input id="filter-categorye" class="js-toggler" type="checkbox" value="categorye"><label for="filter-categorye">Category E
</label><br><input id="filter-categoryf" class="js-toggler" type="checkbox" value="categoryf"><label for="filter-categoryf">Category F
</label><br><input id="filter-categoryg" class="js-toggler" type="checkbox" value="categoryg"><label for="filter-categoryg">Category G
</label><br><input id="filter-categoryh" class="js-toggler" type="checkbox" value="categoryh"><label for="filter-categoryh">Category H
</label><br><input id="filter-categoryi" class="js-toggler" type="checkbox" value="categoryi"><label for="filter-categoryi">Category I</label>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryc">C</div>
<div class="categoryd">D</div>
<div class="categorye">E</div>
<div class="categoryf">F</div>
<div class="categoryg">G</div>
<div class="categoryh">H</div>
<div class="categoryi">I</div>
&nbsp;
<p class="info">- If you select 1-3 boxes = show first image. If you select 4-6 = second image. If you select 7-9 = third image. If you select all of them = fourth image.</p>
<br>

<h1>
Images:
</h1>

<div>
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[]" src="http://dummyimage.com/600x400/000/fff&amp;text=First+image">
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[1]" src="http://dummyimage.com/600x400/000/fff&amp;text=Second+image">
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[2]" src="http://dummyimage.com/600x400/000/fff&amp;text=Third+image">
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[1,2]" src="http://dummyimage.com/600x400/000/fff&amp;text=Fourth+image">
</div>