如何使用输入表单和 jquery 按类别过滤图像？答案

【问题标题】：How to filter images by category using input form and jquery?如何使用输入表单和 jquery 按类别过滤图像？
【发布时间】：2011-10-11 04:19:09
【问题描述】：

例如

我有一个页面有 4 张图片

<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>

如何为每个图像添加一些标记以成为某个类别的一部分，然后使用复选框以jquery .hide() 过滤它们？我宁愿不使用 class 属性。非常感谢您的大力帮助！

【问题讨论】：

I'd prefer not using the class attribute. 为什么不呢？
那么，图片 1 和 4 可能属于风景类别，而 2 和 3 可能是抽象的？
您可以使用图像的宽度和高度来确定它们的方向。方向=（宽度>高度）？ “风景”：“抽象”..
@Johan，伙计，这太棒了。把它放在答案中。
@Grozav -- 所以？为什么你不能使用类？您不必将这些类放入 css...

标签： jquery html image input filter

【解决方案1】：

试试这个： http://jsfiddle.net/shaneburgess/wTkR5/6/

$(document).ready(function(){

    $("#abstractCheck").change(function(){
       $(".abstract").toggle();
    });

     $("#landScapeCheck").change(function(){
       $(".landscape").toggle();
    });

});

HTML：

   <span class="abstract">
    <img src="1"/>
</span>

<span class="landscape">
   <img src="2" />
</span>

<span class="abstract">
   <img src="3" />
</span>

<span class="landscape">
   <img src="4" />
</span>

【讨论】：

你的小提琴根本不符合你的答案
? DOM 发生了什么变化？
@grozav 想要避免使用图像类。
我的意思是图像类（更新了我的最后一个答案），我不确定是否不需要跨度类。

【解决方案2】：

试试这个

<div id="abstract">
   <img src="1" />

   <img src="2" />
</div>

<div id="landscape">
   <img src="3" />

   <img src="4" />
</div>

$("input:checkbox").click(function(){
  $("#abstract, #landscape").hide();
  if($(this).is(":checked")){
     $("#"+$(this).val()).show();
  }
});

【讨论】：

这是假设图像没有全部混在一起。
是的，问题说是在不添加任何类属性的情况下添加所需的标记。
尼尔，除了将图像排列在 div 容器中之外，我的回答有什么问题？
你的意思是我们不应该将图像包装在 div 标签中？
没有。您的回答没有正确回答了问题。我没有DV你。我只是让你知道。

【解决方案3】：

你可以使用img的alt属性

<img src="1" alt="abstract"/>

和jquery：

$(document).ready(function(){
    $('input[name="abstract"]').click(function(){
       $('img[alt="abstract"]').toggle();
})

     $('input[name="landscape"]').click(function(){
       $('img[alt="abstract"]').toggle();
})

});

【讨论】：

【解决方案4】：

为类型添加某个类（即使你不想...）

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

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

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

【讨论】：

你不是说不想使用类属性吗？！
@Steve 但没有更好的办法^_^