Логика: объединение выпадающих списков для переключения видимости

Question

У меня есть 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--;
}

И это в самом конце, если счетчик выше определенного значения, данные будут видны. Это возможно?

Answer 1

Я бы сделал что-то вроде этого:

// 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();
});