Question

我需要使用方法来实现类似于此网页上的内容

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

我将在页面上列出品牌列表。每个品牌应该有3条信息：

首字母
商店（可能是多个）
类别（可能是多个）

所以我需要3个选择框，当选择其中一个选择框时，它将基于此过滤下面的品牌。

我希望过滤器通过javascript在浏览器中发生。

所以我在思考，我有些如何在品牌上添加一些额外的信息，然后从视图中删除与选择框标准不匹配的所有内容。

知道如何实现这个目标吗？

此外，我将使用wordpress和高级自定义字段在进入品牌方面从后端实现此目的。我只是不知道从哪里开始。

我在想这样的事情

<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>

但我不知道如何，我会在后端建立这个。

==========编辑添加========= 我想后端不允许我隔离与商店相关的类别。这里有一个例子Chanel，Brown Thomas销售女装，鞋类，珠宝和配饰以及美容。 Arnotts只卖美女。 Dundrum销售美容和配饰。我将如何实现这一目标？

我认为这样的东西适用于布局，但我不知道使用选择框的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

Answer 1

我会将类别作为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）的解决方案相比，其优势在于速度更快。尝试使用数以千计的物品。

Answer 2

以下是您的代码...... Live Demo

<强> 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 Live Demo

<强> 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);
});

Answer 3

创建一个多维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()];

Answer 4

如果我理解正确，你不想用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，然后处理返回的已过滤对象。

如何使用基于3个选择框的javascript创建可过滤列表

4 个答案: