Question

我正在寻找另一个问题How to filter images by category using input form and jquery?

它有点像我的问题，我试着玩一些jsfiddles然而我没有成功。 http://jsfiddle.net/3bk22/44/

<img src="http://placehold.it/123x100/123/1" class='landClass' />

<img src="http://placehold.it/100/fe2/2" class='landClass' />

<img src="http://placehold.it/100x50/aaa/3" class='absClass' />

<img src="http://placehold.it/200x150/42E/4" class='landClass' />
<br/> <br/>
Filter: <br/>
<select>
<option value="abstract" /> Abstract<br />
<option value="landscape" /> Landscape<br />
</select>

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

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

我基本上不知道是否可以在给出课程后为850+图像创建一个过滤器。我打算使用复选框，但是会有50多个类别，我希望最小化盒子所需的区域。

我想要实现的目标是什么？
- 适用于所有类别的下拉过滤器。
- 一个下拉菜单，我可以添加无限的类别 - 加载时默认显示该框为空 - 隐藏任何不属于当前过滤器的图像。

Answer 1

您应该调整您的班级名称或下拉列表，以保持一致，然后执行此操作：

$("select").change(function(){
    $("img").hide();
    $("." + $(this).val()).show();
});

http://jsfiddle.net/3bk22/45/

Answer 2

我会使用数据属性来引用相应的图像：

var $img = $('.landClass, .absClass');
$('.filter').change(function() {
    $img.hide().filter('.' + $('option:selected', this).data('class')).show();
});

HTML：

<option value="abstract" data-class="absClass">Abstract</option>
<option value="landscape" data-class="landClass">Landscape</option>

http://jsfiddle.net/3bk22/47/

或者更好的想法只是改变图像的类名以匹配像James Montagne建议的选项值。

Answer 3

尝试

$('select').change(function(){
    var value = $(this).val();
    $('img').hide();
    if(value == 'abstract'){
        $('.absClass').show();
    } else if(value == 'landscape'){
         $('.landClass').show();
    }
})

演示：Fiddle

如何使用下拉框按.class过滤图像

3 个答案: