Как я могу упростить эту функцию выбора?

Question

Я ничего не знаю о javascript. Я просто нашел этот фрагмент в Интернете, когда пытался найти решение о том, как добиться того, что мне нужно. Есть ли способ упростить это, так как я буду добавлять около 40 элементов, которые мне нужно показать и скрыть.

var $selects = $('.filters select'); 
    $selects.on('change', getValues).first().trigger("change"); 
    function getValues() { 
    var vals = $selects.map(function() { 
     return this.value; 
    }).get(); 
    if (vals.join('') === "a1b2c3") { 
     $(".box_wrapper").not(".a1b2c3").hide(); 
     $(".a1b2c3").show(); 
     $('html,body').animate({ 
     scrollTop: $(".a1b2c3").offset().top}, 
     'slow'); 
    } 
    else if (vals.join('') === "d4e5f6") { 
     $(".box_wrapper").not(".d4e5f6").hide(); 
     $(".d4e5f6").show(); 
     $('html,body').animate({ 
     scrollTop: $(".d4e5f6").offset().top}, 
     'slow'); 
    } 
    else{ 
     $(".vid_box").hide(); 
    } 
} 

Я думаю, что я могу упростить это дальше, получая соединяемых значения из полей выбора и использовать его на функцию выше, и поскольку я использую ту же самую комбинацию значений для данного класса. Я просто не знаю, как это сделать. Это возможно? Спасибо заранее, ребята!

Answer 1

Вот мой окончательный код. Спасибо @MJH за помощь.

var $selects = $('.filters select'); 
    $selects.on('change', getValues).first().trigger("change"); 
    function getValues() { 
    var $selects = $('.filters select'); 
    $selects.on('change', getValues).first().trigger("change"); 
    function getValues() { 
    var vals = $selects.map(function() { 
     return this.value; 
    }).get(); 
    var vwarp = vals.join(''); 
    if (vwarp == vwarp) { 
     $(".box_wrapper").not("." + vwarp).hide(); 
     $("." + vwarp).show(); 
     $('html,body').animate({ 
     scrollTop: $("." + vwarp).offset().top}, 
     'slow'); 
    } 
    else{ 
     $(".box_wrapper").hide(); 
    } 
} 

Надеюсь, это поможет!

Answer 2

Возможно, что-то вроде этого (код воздуха):

var $selects = $('.filters select'); 
$selects.on('change', getValues).first().trigger("change"); 
function getValues() { 
    var vals = $selects.map(function() { 
     return this.value; 
    }).get(); 

    var values = [ "a1b2c3", "d4e5f6" ]; 

    var vj = vals.join(''); 

    if (values.indexOf(vj) !== -1) { 
     $(".box_wrapper").not("." + vj).hide(); 
     $("." + vj)).show(); 
     $('html,body').animate({ 
      scrollTop: $("." + vj)).offset().top 
     }, 'slow'); 
    } 
    else { 
     $(".vid_box").hide(); 
    } 
} 

Answer 3

Я хотел бы предложить что-то вроде этого.

var $selects = $('.filters select'); 

$selects.on('change', function() { 

    var value = $selects.map(function() { 
     return this.value; 
    }).get(); 

    $(".box_wrapper").not("." + value).hide(); 
    $(".box_wrapper." + value).show(); 
    $('html, body').animate({ 
    scrollTop: $("." + value).offset().top}, 
    'slow'); 
}); 

$selects.first().trigger("change");