Фильтрация элементов в списке на основе их свойств в JavaScript - PullRequest
0 голосов
/ 16 сентября 2009

Я пишу простой кусочек JavaScript, чтобы скрыть / показать элементы в списке в зависимости от того, установлены или нет флажки.

Например, у меня может быть 3 флажка, представляющих цвета красный, синий, зеленый. И список продуктов, которые доступны в 1 или более из этих цветов. Таким образом, если отмечены красные и зеленые флажки, то продукты, которые недоступны в красном или зеленом цвете, должны быть скрыты.

Я очень рад, что могу сделать это, но не являясь разработчиком javascript, я не уверен, что то, что я делаю, очень элегантно (на самом деле я уверен, что это не элегантно). У меня есть исходные данные в электронной таблице, так что я могу легко получить CSV-файл данных для каждого продукта - например, «bike, x ,, x» может означать, что велосипеды доступны в красном и зеленом цвете, но не в синем.

Так может получиться что-то вроде следующего:

products = [
    {
        id: "bike",
        colours: ["x","","x"]
    },
    {
        id: "apple",
        colours: ["x","x",""]
    },
    {
        id: "cheese",
        colours: ["","","x"]
    }
];



function selectProducts(filter){
    var i;
    for(i=0; i<products.length; i++){
        var fi;
        for(fi=0; fi<filter.length; fi++){
            if(filter[fi]=='x' && products[i].colours[fi]=='x'){
            console.log(products[i].id+" will be visible ");
            break;
            }
        }
    }
}

Фильтр, переданный в selectProducts, будет представлять собой массив, подобный ['x', 'x', ''], который может представлять красный или зеленый, но не синий - точно такой же, как свойства цвета продуктов. Сначала я стремился использовать двоичное представление доступных цветов (например, 101 для велосипеда в приведенном выше примере) и использовать побитово и на фильтре, думая, что это будет проще и эффективнее, но, поскольку javascript хранит числа в виде чисел с плавающей запятой, и я Я не вижу простой способ работы с двоичными представлениями чисел, чувствую, что это пошло бы вразрез.

Может быть, что-то вроде следующего было бы лучше, но кажется немного многословным, и будет немного сложнее преобразовать в из файла CSV ...

colours: {
    red: "y",
    green: "n",
    blue: "y"
}

Есть мысли?

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

1 Ответ

0 голосов
/ 04 января 2014

Несколько лет спустя ... Вот как бы я поступил так: JSFiddle Это не обязательно более правильно, чем ваш способ сделать это, просто другой, и я подумал, что поделюсь этим с вами. Изменение "x" и "" с булевыми значениями true и false соответственно, безусловно, также является хорошей идеей, если вы собираетесь использовать свой метод.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...