我正在使用三个下拉菜单,每个下拉菜单都有三个选项。这三个下拉菜单一起创建了一个系统,可以在27个州中的任何一个。对于每个下拉列表,有选项1、选项2和all(选项1和选项2的并集)。
根据这三个下拉菜单所处的状态,我想显示或隐藏不同的div。这些div的类的形式是class="distribution-(select-1)-(select-2)-(select-3)"
我正试图找到一种DRY的编码方式,而不依赖于27个不同的条件。
下面是下拉菜单:
<div style = "margin-top:1cm; font-size:125%">
<strong>Clickout Type </strong>
<select class = "clickouts" >
<option value = "all" selected="selected">All</option>
<option value = "clickouts" >Clickouts</option>
<option value = "preferred" >Preferred Clickouts</option>
</select>
<strong>Graph Type </strong>
<select class = "graph-type" >
<option value = "all" selected="selected">All</option>
<option value = "hist" >Histograms</option>
<option value = "percent" >Percent</option>
</select>
<strong>Roll-up Type </strong>
<select class = "roll-up" >
<option value = "all" selected="selected">All</option>
<option value = "aggregate" >Aggregate</option>
<option value = "granular" >Granular</option>
</select>
</div>
下面是一些div类的例子:distribution-hist-clickouts-aggregate, distribution-percent-clickouts-aggregate, class="distribution-hist-clickouts-granular", distribution-percent-clickouts-granular
下面是前七个状态的jquery:
$('.clickouts, .graph-type, .roll-up').change(function(){
var graph_type = $('.graph-type').val();
var roll_up = $('.roll-up').val();
var clickouts = $('.clickouts').val();
if (graph_type == 'all' & roll_up == 'all' & clickouts == 'all'){
$('div[class*="distribution"]').css('display', 'block');
}
if (graph_type == 'all' & roll_up == 'all' & clickouts == 'clickouts'){
$('div[class*="clickout"]').css('display', 'block');
$('div[class*="preferred"]').css('display', 'none');
}
else if (graph_type == 'all' & roll_up == 'all' & clickouts == 'preferred'){
$('div[class*="clickout"]').css('display', 'none');
$('div[class*="preferred"]').css('display', 'block');
}
else if (graph_type == 'hist' & roll_up == 'all' & clickouts == 'all'){
$('div[class*="hist"]').css('display', 'block');
$('div[class*="percent"]').css('display', 'none');
}
else if (graph_type == 'percent' & roll_up == 'all' & clickouts == 'all'){
$('div[class*="hist"]').css('display', 'none');
$('div[class*="percent"]').css('display', 'block');
}
else if (graph_type == 'all' & roll_up == 'aggregate' & clickouts == 'all'){
$('div[class*="aggregate"]').css('display', 'block');
$('div[class*="granular"]').css('display', 'none');
}
else if (graph_type == 'all' & roll_up == 'granular' & clickouts == 'all'){
$('div[class*="aggregate"]').css('display', 'none');
$('div[class*="granular"]').css('display', 'block');
}
});
如果您将更改您的复杂类class="distribution-(select-1)-(select-2)-(select-3)
设置为class="distribution (select-1) (select-2) (select-3)
类,您可以使用以下脚本:
$('.clickouts, .graph-type, .roll-up').change(function(){
var graph_type = $('.graph-type').val();
var roll_up = $('.roll-up').val();
var clickouts = $('.clickouts').val();
graph_type = (graph_type == "all" ? "" : "." + graph_type);
roll_up = (roll_up == "all" ? "" : "." + roll_up);
clickouts = (clickouts == "all" ? "" : "." + clickouts);
var selector = '#container div' + graph_type + roll_up + clickouts;
$('#container div:visible').hide();
$(selector).show();
});
代码:http://jsfiddle.net/9R5zj/9/
好的,有几件事可以帮助重构它。
您应该记住的一个简单的事情是元素可以有多个类。这意味着,您可以为div提供四个类,而不是使用distribution-hist-clickouts-aggregate
类:
<div class="distribution hist clickouts aggregate"></div>
此外,将选择器放在值中,而不是将选择选项的value
作为all
,可以使程序更容易理解:
<option value = ".aggregate, .granular" selected="selected">All</option>
<option value = ".aggregate" >Aggregate</option>
<option value = ".granular" >Granular</option>
我不确定我完全理解所有if
语句背后的逻辑,但是你可以做一些事情来达到这个效果:
$("div.distribution").hide();
$(graph_type).show();
$(roll_up).show();
$(clickouts).show();
你可以在这个演示中看到我的建议。