Javascript 逻辑：组合下拉框以切换可见性

我有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].counter++;
}else{
    data[i].counter--;
}

---

最后，如果计数器高于某个值，数据就会可见。这可能吗？

我会这样做：

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

//存储我们当前的选择
变量年龄选择、位置选择、性别选择；
//做真正的过滤
函数do_filter（）{
//对于每个元素
对于（i=0；i
// 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();
});