如何簡化此選擇功能？

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

我想我可以通過從選擇框的加盟值進一步簡化這一點，並使用它的上方，因爲我使用的是相同的值組合的類的功能。我只是不知道如何。那可能嗎？在此先感謝你們！

來源

2016-09-28 vancespago

此代碼是否工作？ –

如何使用開關/外殼？ – phreakv6

你能告訴我們你的html –

這是我的最終代碼。感謝@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(); 
    } 
}

希望這有助於！

來源

2016-09-28 07:39:38 vancespago

也許這樣的事情（空氣代碼）：

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

來源

2016-09-28 06:04:57 MJH

以下例子，我設法簡化它，但如果我使用'$（'html，body'），我在scrolltop函數中有一個'Uncaught Type Error' .animate {} {scrollTop：$（「。」+ vj））。offset（）。top }，'slow'）;' 雖然如果我只是使用普通的類定位， – vancespago

嗯，我確實說過它是空運碼。如果你在'if'塊中記錄'vj'到控制檯，你會得到什麼？它與正常的課程價值相同嗎？ – MJH

不知道該怎麼做。你能告訴我我應該在瀏覽器控制檯上輸入的確切命令嗎？抱歉。 – vancespago

我建議這樣的事情。

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

來源

2016-09-28 06:42:54 exabyssus

如何簡化此選擇功能？

回答

相關問題