如何使用输入表单和jquery按类别过滤图像？ [英] How to filter images by category using input form and jquery?

问题描述

例如

我有一个页面，里面有4张图片

 < img src =1/> 
 
< img src =2/> 
 
< img src =3/> 
 
< img src =4/> 
 
过滤器：
< form> 
< input type =checkboxname =galleryvalue =abstract/>摘要< br /> 
< input type =checkboxname =galleryvalue =landscape/>景观
< / form> 
  

如何将每个图像添加一些标记作为某个类别的一部分，然后使用复选框用过滤它们jquery .hide（）？我不喜欢使用class属性。
非常感谢您的帮助！

解决方案

对于类型添加某个类（即使您不想要...）

  $（'input [value =landscape]'）。click（function（）{
 $（'。landClass'）。toggle（）; 
}）; 
 $ b $（'input [value =abstract]'）。click（function（）{
 $（'。absClass'）。toggle（）; 
}） ; 
  

小提琴： http://jsfiddle.net/maniator/3bk22/

For example

I have a page where there are 4 images

<img src="1" />

<img src="2" />

<img src="3" />

<img src="4" />

Filter:
<form>
<input type="checkbox" name="gallery" value="abstract" /> Abstract<br />
<input type="checkbox" name="gallery" value="landscape" /> Landscape
</form> 

How can I add some markup each image to be part of a certain category, then using a checkbox to filter them with jquery .hide()? I'd prefer not using the class attribute. Thanks a lot for the huge help!

解决方案

For type add a certain class (even if you do not want to...)

$('input[value="landscape"]').click(function(){
    $('.landClass').toggle();
});

$('input[value="abstract"]').click(function(){
    $('.absClass').toggle();
});

Fiddle: http://jsfiddle.net/maniator/3bk22/

这篇关于如何使用输入表单和jquery按类别过滤图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！