Селекторы Jquery, основанные на значении трех выпадающих меню

Question

Я работаю с тремя раскрывающимися меню, каждое из которых имеет три варианта. Вместе эти три выпадающих меню создают систему, которая может находиться в любом из двадцати семи состояний. Для каждого раскрывающегося списка есть вариант 1, вариант 2 и все (что является объединением вариантов 1 и 2).

В зависимости от того, в каком состоянии находятся эти три раскрывающихся меню, я хочу отображать или скрывать различные элементы div. Эти div имеют классы этой формы class="distribution-(select-1)-(select-2)-(select-3)"

Я пытаюсь найти СУХОЙ способ кодирования этого, не полагаясь на 27 различных условий.

Вот выпадающие меню:

<div  style = "margin-top:1cm; font-size:125%">
    <strong>Clickout Type&nbsp;</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&nbsp;</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&nbsp;</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

Вот запрос для первых семи состояний:

$('.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');
    }
});

Answer 1

Если вы замените свой комплексный класс 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/

Answer 2

Хорошо, есть несколько вещей, которые помогут реорганизовать это.

Простая вещь, которую вы должны помнить, состоит в том, что элементы могут иметь более одного класса.Это означает, что вместо того, чтобы иметь div с классом distribution-hist-clickouts-aggregate, вы можете дать div четыре класса, например:

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

Вы можете увидеть, что я предлагаю в действии на этой демонстрации .