0

100 行のデータがあり、それぞれに年齢、場所、性別の 3 つのプロパティがあります。

年齢、場所、性別に基づいてデータをフィルタリングするための 3 つの選択ボックスがあります。

私の関数 setVisible(true) または setVisible(false) は、行を非表示または表示にします。

ドロップダウン ボックスで選択した内容に応じて、データをフィルター処理したいと考えています。

3 つのイベント リスナーを設定しました。

$('.age_selector').change(function() {
    for (i=0;i<data.length;i++){
        if (data[i].age == $('.age_selector').val()){
            data[i].setVisible(true);
        } else {
            data[i].setVisible(false);
        }
    }
});
$('.location_selector').change(function() {
    for (i=0;i<data.length;i++){
        if (data[i].location == $('.location_selector').val()){
            data[i].setVisible(true);
        } else {
            data[i].setVisible(false);
        }
    }
});
$('.gender_selector').change(function() {
    for (i=0;i<data.length;i++){
        if (data[i].gender == $('.gender_selector').val()){
            data[i].setVisible(true);
        } else {
            data[i].setVisible(false);
        }
    }
});

私の問題は、表示が最近選択したドロップダウン オプションにのみ依存することです。たとえば、場所としてアメリカを選択した場合、[男性] を選択すると、場所や年齢に関係なく、すべての男性がリストに表示されます。アメリカ人男性のみを表示するようにフィルター処理されるようにロジックを組み合わせるにはどうすればよいですか?

ありがとう

編集：カウンターのラインに沿って何かを持ちたいと思っていたので、代わりに

if (data[i].age == $('.age_selector').val()){
    data[i].setVisible(true);
}

私は次のようなものを持っているでしょう

if (data[i].age == $('.age_selector').val()){
    data[i].counter++;
}else{
    data[i].counter--;
}

そして最後に、カウンターが特定の値を超えている場合、データが表示されます。これは可能ですか？

4

1 に答える 1

0

私はこのようなことをします：

// Store our current selections
var age_selection, location_selection, gender_selection;

// Do the real filtering
function do_filter() {
    // For each element
    for (i=0;i<data.length;i++) {
        // If our data doesn't match one of the selections, set it to not visible
        if (age_selection != null && data[i].age != age_selection) {
            data[i].setVisible(false);
        } else if (location_selection != null && data.location != location_selection) {
            data[i].setVisible(false);
        } else if (gender_selection != null && data.gender != gender_selection) {
            data[i].setVisible(false);
        } else {
            // Otherwise, set it visible
            data[i].setVisible(true);
        }
    }
}

// When one of the selectors changes, store the selection, and call do_filter
$('.age_selector').change(function() {
    age_selection = $('.age_selector').val();
    do_filter();
});
$('.location_selector').change(function() {
    location_selection = $('.location_selector').val();
    do_filter();
});
$('.gender_selector').change(function() {
    gender_selection = $('.gender_selector').val();
    do_filter();
});
于 2013-03-09T15:58:10.460 に答える