2

このWebページにあるものと同様のものを実装する方法が必要です

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

ページにブランドのリストがあります。各ブランドには次の 3 つの情報が必要です。

  1. 開始文字
  2. ストア (複数の場合があります)
  3. カテゴリ (複数の場合があります)

したがって、3 つの選択ボックスが必要です。選択ボックスの 1 つが選択されると、これに基づいてその下のブランドがフィルター処理されます。

JavaScriptを介してブラウザ内でフィルタを実行したいと思います。

だから私は考えていました、私はブランドにいくつかの追加情報を追加してから、選択ボックスの基準に一致しないものをすべてビューから削除する方法を考えていました.

どうすればこれを達成できるのでしょうか？

また、ブランドを入力するという点で、バックエンドからこれを達成するためにワードプレスと高度なカスタム フィールドを使用します。どこから始めればいいのかわかりません。

私はこのようなことを考えていました

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

しかし、どうすればよいかわかりません。これをバックエンドで構築します。

==========編集を追加========= バックエンドでストアに関連するカテゴリを分離できないようにしたい。シャネルの例を次に示します。ブラウン トーマスは、婦人服、履物、ジュエリー、アクセサリー、美容品を販売しています。アーノッツは美しさだけを売ります。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

これがあなたのコードです...ライブデモ

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

私がこれを正しく理解していれば、このようなものを 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 に答える
0

3 つの条件をキーとして含む多次元 JavaScript 配列を作成して、一致する値に簡単にアクセスし、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()];
于 2013-01-27T10:06:13.827 に答える