Question

我不确定提出这个问题的最好方法，因此谷歌为什么要离开我。

基本上我想创建一个拥有（例如）30张图片和30张图片的照片库，它们可以放入3种不同的类别。

我希望用户能够单击复选框以显示或隐藏不同的类别（以及后续图片）或查看所有类别。

例如，照片库左侧会有4个复选框。顶部框将是ALL，然后是Category 1，Category 2，Category 3.当您单击每个框时，只会出现那些“类型”的图像。

任何关于代码的提示（甚至我应该寻找的代码类型，即CSS，Javascript，jQuery）都将不胜感激。谢谢！

Answer 1

CSS - ＆gt;

.chkbox-container{
  float:left;
  width:95px;
  border:1px solid #ccc;    
}
.img-container{
  float:left;
  width:300px;
  border:1px solid #ccc;    
}
img{
  display:inline-block;
  width:90px;
  height:75px;
  padding:2px;
  border:1px solid black;
  display:none;    
}

JQuery - ＆gt;

$('.chkbox-container :radio').on('change', function(){
  var me = $(this);
  $.each($('.img-container img'), function(i,v){
    var theCats = $(v).attr('rel');
    theCats = theCats.split(' ');
    if($.inArray(me.val(), theCats)){
      $(v).show();
    }else{
      $(v).hide();
    }

  });        
});

HTML - ＆gt;

<div class="chkbox-container">
  <input type="radio" name="catfilter[]" value="all" checked="checked"/> All<br/>
  <input type="radio" name="catfilter[]" value="category1" /> Category 1<br/>
  <input type="radio" name="catfilter[]" value="category2" /> Category 2<br/>
  <input type="radio" name="catfilter[]"value="category3" /> Category 3<br/>
</div>
<div class="img-container">
  <img src="path.to/the/image/ext" rel="category1" />
  <img src="path.to/the/image/ext" rel="category2" />
  <img src="path.to/the/image/ext" rel="category3" />
</div>

Working jsFiddle for anyone that finds it useful.

如何实现复选框或类别导向的照片库

1 个答案: