如何实现复选框或面向类别的照片库
How to achieve a check box or category oriented photo gallery
我不确定这个问题的最佳表达方式,因此谷歌让我悬而不决。
从本质上讲,我想创建一个有(例如)30张图片的照片库,在这30张图片中,有3个不同的类别。
我希望用户能够单击复选框来显示或隐藏不同的类别(以及随后的图片)或查看所有类别。
例如,照片库左侧会有4个复选框。最上面的框是ALL,然后是Category 1、Category 2、Category 3。单击每个框时,只会显示这些"类型"的图像。
任何关于代码的提示(甚至是我应该寻找的代码类型,即CSS、Javascript、jQuery)都将不胜感激。谢谢
CSS->
.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->
$('.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->
<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>
为任何觉得有用的人使用jsFiddle。
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- Javascript复选框函数:;缺少:在属性id之后"
- JavaScript-切换“;全部检查”;复选框true/false
- 如何从javascript/jquery中的复选框中获取布尔值
- 如何从django表单库中隐藏复选框,并使用Javascript切换其显示属性
- 如何实现复选框或面向类别的照片库
- Javascript - setInterval,如果选中复选框,则交替选中单选(无库)
- 条件字段 jQuery 库不适用于复选框