逻辑:组合下拉框来切换可见性
Logic: Combining dropdown boxes to toggle visibility
我有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--;
}
并且在最后,如果计数器高于某个值,数据将是可见的。这可能吗?
我会这样做:
// 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();
});
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- jQuery css可见性在load方法中不起作用
- 页面可见性API实际上支持操作系统屏幕锁定吗
- 有没有一种方法可以从隐藏的可见性(CSS,JS)中获得淡入效果
- JavaScript可见性不起作用('隐藏'起作用,'可见'不起作用)
- 从内部回调的可见性
- Openlayers 3为了可见性而绑定到Vector层的复选框没有任何作用
- 在另一个下拉列表中的选择上切换下拉列表中选项的可见性
- 如何禁用mouseout可见性=“;隐藏的“;对小于768px的介质的影响
- 在网格视图的自动刷新过程中,设置内部网格视图文本框的可见性
- 将元素的可见性绑定到另一个元素
- 使用 Javascript 将 HTML 页面中的默认可见性从可见更改为隐藏
- 使用 jQuery 检查文本可见性 .包含代码的行为不符合预期
- 在 jQuery 手风琴样式菜单中切换子项可见性
- CSS 中定义的可见性值未显示在 Javascript 中
- jquery切换可见性
- 如何使用 asp.net 中的另一个下拉列表更改下拉列表选定的索引和可见性
- 使用javascript的图像可见性
- 文本框的可见性取决于组合框的值
- 逻辑:组合下拉框来切换可见性