Question

假设您根据年龄段（20-25,26-30,31-35 ......）过滤了一系列人物照片。鉴于用户可以置换到他们想要的任何范围，你怎么能使显示/隐藏有效？

编辑：这是我目前的代码：

HTML：

<img src="http://..." age=""/>

jQuery的：

var str = '';

$("#ageSelector option:selected").each(
    function () {
        str += $(this).attr("value") + "";
    }
);

$('.photo').each(
    function() {

        var age = parseInt( $(this).attr("age") );

        switch( str ){

            case '18to24':
                if( age <= 24 ){
                    $(this).show();
                }

                if( age > 24 ) {
                    $(this).hide();
                }
                break;
            case '25to35':
                if( age >= 25 || age <= 35 ) {
                    $(this).show();
                }

                if( age < 25 || age > 35 ){
                    $(this).hide();
                }
                break;
            case '36to45':
                if( age < 36 || age > 45 ){
                    $(this).hide();
                }

                if( age >= 36 || age <= 45 ){
                    $(this).show();
                }
                break;
            case '45to50':
                if( age < 45 || age > 50 ){
                    $(this).hide();
                }
                if( age >= 45 || age <= 50 ){
                    $(this).show();
                }
                break;
            case 'moreThan50':
                if( age < 50 ){
                    $(this).hide();
                }

                if( age >= 50 ) {
                    $(this).show();
                }
                break;
            default:
                $(this).show();
        }


    }
);

Answer 1

如果没有提供您正在寻找的确切内容的详细信息，很难提供确切的答案，但是在右侧是something like this吗？更改select元素中的值，以根据选择过滤div元素。

它使用jQuery filter函数根据所选值缩小选择范围，并隐藏所有不匹配的元素。

Answer 2

我不确定你是如何在图像上存储年龄的，所以我假设你的IMG标签上有一个符合HTML5标准的数据属性。目前还不清楚你是如何得到可接受值的范围的。

您还没有提供有关何时发生这一切的详细信息。我会假设这是你的下拉变化。

$('#ageSelector').change(function() {
    //Parse out min and max values from your drop down

    var range = $(this).find('option:selected').val().split("to");
    var min = parseInt(range[0]);
    var max = parseInt(range[1]);

    //To show just elements in the range

    $('img.photo').filter(function() { 
        return $(this).data('age') >= min && $(this).data('age') <= max;
    }).show();

    //To show elements in the range and hide all others

    $('img.photo').each(function() { 
        $this = $(this);
        $this.toggle($this.data('age') >= min && $(this).data('age') <= max);
    });
});

Answer 3

如果您可以将图像放在表格（和年龄）中，例如：

var imgs= [ ["http://site/img1.jpg",32],
            ["http://site/img2.jpg",27],
            ["http://site/img5.jpg",24],
            ["http://site/img9.jpg",22] ];

你有一个容器<div id="container"></div>，你可以执行以下功能：

function loadRange(a,b){
  for(var i=0;i<imgs.length;i++)
    {
    if(imgs[i][1]>=a && imgs[i][1]<=b)
        {
            if(imgs[i][0]==null) $("#img"+i).show();
            else
            {
                $("#container").append('<img src="'+encodeURI(imgs[i][0])+'" id="img'+i+'" />');
                imgs[i][0]= null;
            }
        }
        else if(imgs[i][0]==null) $("#img"+i).hide();
    }
}

并致电loadRange(20,24)加载20至24。

（仅在需要时加载图像一次）

根据范围显示/隐藏一系列元素的有效方式

3 个答案: