2

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

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

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

  1. 首字母
  2. 商店（可以是多个）
  3. 类别（可以是多个）

So I need 3 select boxes, when one of the select boxes is selected it will filter the brands underneath based on this.

我希望过滤器通过 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>

但我不知道如何，我会在后端构建它。

==========edit added========= 我想后端不允许我分离与商店相关的类别。这里是香奈儿 (Chanel) 的一个例子，布朗托马斯 (Brown Thomas) 销售女装、鞋类、珠宝和配饰以及美容产品。阿诺茨只卖美容。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>

-== 编辑添加======

这就是目前在后端选择信息的方式，

在此处输入图像描述

但我需要它，所以它可以与这样的东西一起使用

在此处输入图像描述

4

4 回答 4

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) 的解决方案相比，优势在于速度要快得多。用成千上万的物品试一试。

于 2013-01-27T10:00:19.017 回答
1

这是您的代码...现场演示

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);
});
于 2013-01-27T11:44:55.810 回答
0

创建一个多维 JavaScript 数组，其中包含您的 3 个条件作为键，因此您可以轻松访问匹配值并通过 jQuery 更新选择。

IE

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

以及稍后选择值时：

var myResultsForSecondSelect = myResults[$('#select1').value()];
var myResultsForThirdSelect = myResults[$('#select1').value()][$('#select2').value()];
于 2013-01-27T10:06:13.827 回答
0

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

于 2013-01-27T10:45:24.073 回答