Question

我想制作一个包含许多图片的页面。在页面顶部，我想用多个复选框过滤它们。我希望能够同时使用一个或多个过滤。

如何在同一张图片上放置2个标签，以便图片中有一只狗和一只猫可以双向显示？

$("#gallery1 input").on("change", function() {
    $("#gallery1 img").css("display", "none");
    $("#gallery1 input:checked").each(function(idx, item) {
        $("#gallery1 img[data-tag='" + item.value + "']").css("display", "inline");
    });
});

Answer 1

嗨，请使用此

更新您的代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<div id="gallery1">
        <input type="checkbox"value="dog">Dog 
        <input type="checkbox"value="cat">Cat 
        <input type="checkbox"value="bird">Bird
  <!-- DOG -->
        <img src="https://image.ibb.co/ev36Dx/1.jpg" data_cat="dog">
        <img src="https://image.ibb.co/cyXNmH/2.jpg" data_cat="dog">
        <!-- CAT -->
        <img src="https://image.ibb.co/d3Rttx/3.jpg" data_cat="cat">
        <img src="https://image.ibb.co/npueYx/4.jpg" data_cat="cat">
        <!-- Bird -->
        <img src="https://image.ibb.co/mZE2mH/5.jpg" data_cat="bird">
        <img src="https://image.ibb.co/iWaWfc/6.jpg" data_cat="bird">
    </div>
<script>
        $("#gallery1 input").on("change", function() {
            $("#gallery1 img").css("display", "none");
            $("#gallery1 input:checked").each(function(idx, item) {
                                $("#gallery1 img[data_cat*='" + item.value + "']").css("display", "inline");
            })
        })
    </script>
  </body>
</html>

Answer 2

这应该有效：

$(function() {
  var $gallery = $("#gallery1");
  $inputs = $gallery.find("input");
  $inputs.attr("checked", "checked");
  $inputs.on("change", function() {
    $inputs.each(function(i, cb) {
      if (!cb.checked) $gallery.find("." + this.value).css("display", "none");
    });
    $inputs.each(function(i, cb) {
      if (cb.checked) $gallery.find("." + this.value).css("display", "inline");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery1">
  <input type="checkbox" value="dog">Dog
  <input type="checkbox" value="cat">Cat
  <input type="checkbox" value="bird">Bird
  <input type="checkbox" value="cute">Cute
  <br>
  <!-- DOG -->
  <img class="dog" src="https://image.ibb.co/ev36Dx/1.jpg">
  <img class="cute dog" src="https://image.ibb.co/cyXNmH/2.jpg">
  <!-- CAT -->
  <img class="cat" src="https://image.ibb.co/d3Rttx/3.jpg">
  <img class="cat" src="https://image.ibb.co/npueYx/4.jpg">
  <!-- Bird -->
  <img class="bird" src="https://image.ibb.co/mZE2mH/5.jpg">
  <img class="cute bird" src="https://image.ibb.co/iWaWfc/6.jpg">
</div>

Answer 3

检查它，将狗猫和鸟图像放入具有div id狗，猫，鸟的单独div中： - ＆gt;

/* check box ids*/
var idArray = ['dog_1', 'cat_1', 'bird_1'];
/* check checkbox status */
function changeStatus(event){
    var ids = checkedSelection();
    var lengthOfIds = ids.length;
    for(var index = 0; index < lengthOfIds; index++){
   var elm = ids[index].slice(0,ids[index].length-2);
                 console.log(elm);
       $("#"+elm).show()
    }       
}

/* filter checked check box*/
function checkedSelection(){
var newIds = [];
for(var index = 0; index < idArray.length; index++ ){
  var el=document.getElementById(idArray[index]).checked;
  el ? newIds.push(idArray[index]) : $("#"+idArray[index].slice(0,idArray[index].length-2)).hide();
}
    return newIds;
}

过滤图库

3 个答案: