2016-09-28 8 views
0

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

は、私は選択ボックスから参加した値を取得することによってこれをさらに簡素化し、上記と私はクラスの同じ値の組み合わせを使用しておりますので機能にそれを使用することができると思います。私はちょうど方法を知らない。それは可能ですか?事前にみんなありがとう!おそらく、

+0

このコードは機能しますか? –

+0

スイッチ/ケースの使用はいかがですか? – phreakv6

+0

あなたは私たちにあなたのhtmlを表示することができます –

答えて

0

ここは私の最終的なコードです。すべての助けに感謝@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(); 
    } 
} 

0

このような何か(空気コード):

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

あなたの例に従って、私はそれを簡略化するために管理しますが、私は 'Uncaught Type Error' 通常のクラスターゲティングを使用してもエラーは表示されません。 – vancespago

+0

まあ、私はそれがエアコードだと言った。あなたが 'if'ブロック内のコンソールに' vj'を記録するとどうなりますか?それは通常のクラス値と同じですか? – MJH

+0

これを行う方法はわかりません。ブラウザコンソールで入力する必要がある正確なコマンドを教えてください。ごめんなさい。 – vancespago

0

私はこのような何かを示唆しています。

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"); 
関連する問題