0

我正在查看另一个问题
如何使用输入表单和 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 多个类别，我希望尽量减少框所需的区域。

我想达到什么目的？
- 所有类别的下拉过滤器。
- 我可以添加无限类别的下拉菜单。
- 加载时默认显示该框为空。
- 隐藏任何不属于当前过滤器的图像。

4

3 回答 3

3

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

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

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

于 2013-04-18T12:10:07.153 回答
1

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

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 建议的选项值。

于 2013-04-18T12:12:06.860 回答
0

尝试

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

演示：小提琴

于 2013-04-18T12:06:52.007 回答