Мне нужно метод, чтобы реализовать что-то похожее на то, что находится на этой веб-странице

http://www.brownthomas.com/brands/

У меня будет список брендов на странице. У каждого бренда должно быть 3 элемента информации:

  1. начальная буква
  2. магазин (может быть несколько)
  3. категория (может быть несколько)

Так что мне нужно 3 блока выбора, когда один из блоков выбора будет выбран, он будет фильтровать бренды под ним на основе этого.

Я хотел бы, чтобы фильтр происходил в браузере через JavaScript.

Поэтому я подумал, что я могу как-то добавить дополнительную информацию о брендах, а затем убрать из поля зрения все, что не соответствует критерию выбора.

Есть идеи, как мне этого добиться?

Также я буду использовать WordPress и Advanced Custom Fields, чтобы добиться этого от бэкэнда с точки зрения ввода брендов. Я просто не знаю с чего начать.

Я думал что-то вроде этого

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-category="Mens Wear, Shoes">Brand name</li>

        </ul>

    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-alpha="A" data-store="Arnotts,Dundrum" data-category="Womens Wear, Cosmetics" >A Brand Name</li>

        </ul>

    </div>

</div>

Но я не знаю как, я бы построил это в бэкэнде.

========== Редактирование добавлено ========= Я хочу, чтобы бэкэнд не позволял мне разделять категории, относящиеся к магазинам. Вот пример Шанель, Браун Томас продает женскую одежду, обувь, украшения, аксессуары и косметику. Арноттс продает только красоту. Дундрум продает косметику и аксессуары. как бы мне этого добиться?

Я думал, что-то вроде этого будет работать для макета, но я не знаю javascript для работы с полями выбора

<div classs="brand-holder">

<div class="brand-column">
    <h3>A</h3>
    <ul class="brand-list">
        <li data-alpha="A" data-store="Arnotts,Dundrum,brownThomas" data-arnotts-category="Womens Wear, Cosmetics" data-dundrum-category="Womens Wear" data-brownThomas-category="Beauty" >A Brand Name <i>[store:Arnotts,Dundrum :: category: Womens Wear, Cosmetics]</i></li>
    </ul>
</div>

- == Редактировать добавлено ======

Вот как информация выбирается в бэкэнде на данный момент,

enter image description here

Но мне это нужно, чтобы он работал с чем-то вроде этого

enter image description here

2
molleman 23 Янв 2013 в 20:43

4 ответа

Лучший ответ

Вот ваш код ... Демо-версия

< Сильный > HTML

Без изменений в вашей части данных, просто добавили элементы select.

<select id="alpha" onchange="selectData();">
    <option value="">Choose A-Z</option>
    <option value="0">0-9</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select id="store" onchange="selectData();">
    <option value="">Any Store</option>
    <option value="Arnotts">Arnotts</option>
    <option value="BrownThomas">BrownThomas</option>
    <option value="Dundrum">Dundrum</option>
</select>
<select id="category" onchange="selectData();">
    <option value="">Any Category</option>
    <option value="Mens Wear">Mens Wear</option>
    <option value="Shoes">Shoes</option>
    <option value="Womens Wear">Womens Wear</option>
    <option value="Cosmetics">Cosmetics</option>
</select>

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-category="Mens Wear, Shoes">Brand name <i>[store:Arnotts,BrownThomas :: category: Mens Wear, Shoes]</i></li>
        </ul>
    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-store="Arnotts,Dundrum" data-category="Womens Wear, Cosmetics" >A Brand Name <i>[store:Arnotts,Dundrum :: category: Womens Wear, Cosmetics]</i></li>
        </ul>
    </div>
</div>

< Сильный > CSS

.hidden {
    display:none;
}

< Сильный > Javascript

function selectData() {
    var alpha = document.getElementById('alpha').value;
    var store = document.getElementById('store').value;
    var category = document.getElementById('category').value;
    var i;
    var j;
    var flag;

    items = document.getElementsByTagName("li");

    // Hide/show items
    for(i = 0; i < items.length; i++) {
        a = items[i].getAttribute('data-alpha');
        s = items[i].getAttribute('data-store').split(",");
        c = items[i].getAttribute('data-category').split(",");

        // To be safe
        for(j = 0; j < s.length; j++) s[j] = s[j].trim();
        for(j = 0; j < c.length; j++) c[j] = c[j].trim();

        if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
            items[i].classList.remove("hidden");
        } else {
            items[i].classList.add("hidden");
        }
    }

    // Clear empty groups
    groups = document.getElementsByClassName("brand-list");

    for(i = 0; i < groups.length; i++) {
        flag = true;

        for(j = 0; j < groups[i].childNodes.length; j++) {
            node = groups[i].childNodes[j];

            if(node.nodeName.trim() == "LI" && (node.className == "" || node.className.indexOf('hidden') == -1)) {
                flag = false;
                break;
            }
        }

        // Remove the whole div
        if (flag) {
            groups[i].parentNode.classList.add("hidden");
        } else {
            groups[i].parentNode.classList.remove("hidden");
        }
    }
}

jQuery (вместо Javascript)

$(document).ready(function() {
    function selectData() {
        var alpha = $("#alpha").val();
        var store = $("#store").val();
        var category = $("#category").val();
        var j;

        // Hide items
        $("li").each(function() {
            a = $(this).attr('data-alpha');
            s = $(this).attr('data-store').split(",");
            c = $(this).attr('data-category').split(",");

            // To be safe
            for(j = 0; j < s.length; j++) s[j] = s[j].trim();
            for(j = 0; j < c.length; j++) c[j] = c[j].trim();

            if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });

        // Hide empty sections
        $(".brand-list").each(function() {
            if($(this).children("li").not(".hidden").length > 0) {
                $(this).parent().removeClass("hidden");
            } else {
                $(this).parent().addClass("hidden");
            }
        });
    }

    $("#alpha").on("change", selectData);
    $("#store").on("change", selectData);
    $("#category").on("change", selectData);
});

Решение: 2 Живая демоверсия

< Сильный > HTML

<select id="alpha"">
    <option value="">Choose A-Z</option>
    <option value="0">0-9</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select id="store"">
    <option value="">Any Store</option>
    <option value="Arnotts">Arnotts</option>
    <option value="BrownThomas">BrownThomas</option>
    <option value="Dundrum">Dundrum</option>
</select>
<select id="category">
    <option value="">Any Category</option>
    <option value="Beauty">Beauty</option>
    <option value="Shoes">Shoes</option>
    <option value="Womens Wear">Womens Wear</option>
    <option value="Cosmetics">Cosmetics</option>
</select>

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-arnotts-category="Mens Wear, Cosmetics" data-dundrum-category="" data-brownthomas-category="Beauty" >1. Brand Name <i>[data-store="Arnotts,BrownThomas" data-arnotts-category="Mens Wear, Cosmetics" data-dundrum-category="" data-brownthomas-category="Beauty"]</i></li>
        </ul>
    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-store="Arnotts,Dundrum,BrownThomas" data-arnotts-category="Womens Wear, Cosmetics" data-dundrum-category="Womens Wear" data-brownthomas-category="Beauty" >A Brand Name <i>[data-store="Arnotts,Dundrum,BrownThomas" data-arnotts-category="Womens Wear, Cosmetics" data-dundrum-category="Womens Wear" data-brownthomas-category="Beauty"]</i></li>
        </ul>
    </div>
</div>

< Сильный > CSS

.hidden {
    display:none;
}

< Сильный > JQuery

$(document).ready(function() {
    function selectData() {
        var alpha = $("#alpha").val();
        var store = $("#store").val();
        var category = $("#category").val();
        var j;

        // Hide items
        $("li").each(function() {
            a = $(this).attr('data-alpha');
            s = $(this).attr('data-store').split(",");

            if (store == "") {
                c = ($(this).attr('data-arnotts-category') + "," + $(this).attr('data-dundrum-category') + "," + $(this).attr('data-brownThomas-category')).split(",");
            } else {
                c = $(this).attr('data-' + store.toLowerCase() + '-category');
            }

            // To be safe
            for(j = 0; j < s.length; j++) s[j] = s[j].trim();
            for(j = 0; j < c.length; j++) c[j] = c[j].trim();

            if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });

        // Hide empty sections
        $(".brand-list").each(function() {
            if($(this).children("li").not(".hidden").length > 0) {
                $(this).parent().removeClass("hidden");
            } else {
                $(this).parent().addClass("hidden");
            }
        });
    }

    $("#alpha").on("change", selectData);
    $("#store").on("change", selectData);
    $("#category").on("change", selectData);
});
1
ATOzTOA 28 Янв 2013 в 19:26

Я бы поместил категории в классы CSS, сгенерировал правила CSS для всех категорий, а затем изменил класс CSS родительского элемента.

Примере:

<div id="list" class="container all">
    <div class="item startletterA storeFoo categoryNice">
</div>

<style>
    container     .item { display: none; }
    container.all .item { display: block; }
    container.startletterA item.startletterA { display: block; }
    container.startletterB item.startletterB { display: block; }
    ...
    container.storeFoo item.storeFoo { display: block; }
    container.storeBar item.storeBar { display: block; }
    ...
</style>

<select type="radio" onclick="$('list').replaceClass('startletter*', 'startletterA');"/>

replaceClass() может не существовать, но это не сложно реализовать.

Преимущество по сравнению с решением на основе JavaScript (jQuery) состоит в том, что это намного быстрее. Попробуйте это с тысячами предметов.

1
Ondra Žižka 27 Янв 2013 в 10:13

Создайте многомерный массив JavaScript, содержащий 3 критерия в качестве ключей, чтобы вы могли легко получить доступ к совпадающим значениям и обновить выборки с помощью jQuery.

То есть

var myResults = new Array(
    'a' => new Array(
        'Arnotts' => new Array(
            'BrownThomas',
            'JohnDoe'
        )
    )
);

И позже, когда значения выбраны:

var myResultsForSecondSelect = myResults[$('#select1').value()];
var myResultsForThirdSelect = myResults[$('#select1').value()][$('#select2').value()];
0
Tobias 27 Янв 2013 в 10:06

Если я правильно понимаю, вы не хотите загружать этот материал с помощью AJAX, но имеете всю информацию, доступную с самого начала. Если это так, я бы создал объект JSON следующим образом:

var data = {
    a: {
        storeA: ['categoryAA', 'categoryAB'],
        storeB: ['categoryBA', 'categoryBB']
    },
    b: {
    },
    c: {
    }
};

Затем, чтобы заполнить выборки, вы должны создать методы:

function updateOneLetter(data) {
    for(var key in data) {
        // fill in one letter select
    }
}

function udatesStores(data, oneLetter) {
    data = oneLetter ? [data[oneLetter]] : data;
    var keys = [];    
    $.each( data, function(i, n) {
        for(var key in n) {
            // fill in category
        }
    });
}

(...)

Вы бы заполнить категории аналогичным образом. Вы можете создать вспомогательные методы для простого извлечения отфильтрованных значений - вместо заполнения select inline в функциях обновления выше, а затем работать с возвращенными отфильтрованными объектами.

0
theadam 27 Янв 2013 в 10:45