Эффективный способ показать / скрыть ряд элементов в соответствии с диапазонами - PullRequest
Новая
       10

Эффективный способ показать / скрыть ряд элементов в соответствии с диапазонами

0 голосов
/ 27 июля 2011

Скажем, вы фильтруете длинную серию фотографий людей по возрастным диапазонам (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();
        }


    }
);

Ответы [ 3 ]

1 голос
/ 27 июля 2011

Я не уверен, как вы храните возраст на изображении, поэтому я просто предположу, что у вас есть HTML5-совместимый атрибут данных в вашем теге IMG. Также неясно, как вы получаете диапазон допустимых значений.

Вы еще не предоставили подробную информацию о том, когда все это происходит. Я предполагаю, что это на смене вашего выпадающего списка. 

$('#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);
    });
});
1 голос
/ 27 июля 2011

Если вы можете иметь свои изображения в таблице (и возраст), как: 

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.

(для загрузки только изображения один раз при необходимости)

1 голос
/ 27 июля 2011

Трудно дать точный ответ, если вы не предоставите более подробную информацию о том, что именно вы ищете, но является ли что-то вроде по правильным линиям?Измените значение в элементе select, чтобы отфильтровать элементы div на основе выбора.

Он использует функцию jQuery filter для сужения выбора на основе выбранных значений и скрывает всеэлементы.

...