0

私はここで同様の解決策を見てきましたが、それらはあまりにも具体的です。私の場合、解決策に対してより一般的なアプローチが必要です。基本的に、DIVの表示で使用されるクラスに関係なく再利用できるもの。

補足：私はjQueryやJavaScriptがあまり得意ではなく、それに取り組んでいます。

私のHTMLコード

<select name="business-law" id="business-law" class="filter">
  <option value="view-all">&mdash; View All</option>
  <option value="firm-name">Firm name 1</option>
  <option value="other-firm">Firm name 2</option>
  <option value="another-one">Firm name 3</option>
  <option value="final-firm-name">Firm name 4</option>
</select>

<div class="firm-name">Author 1 info</div>
<div class="firm-name">Author 2 info</div>
<div class="other-firm">Author 3 info</div>
<div class="another-one">Author 4 info</div>
<div class="final-firm-name">Author 5 info</div>
<div class="final-firm-name">Author 6 info</div>

私の場合

私は法律事務所の著者をリストするページを作成しています。リストには多くの著者がおり、それらの多くは同じ法律事務所に属しています。

私の問題

ページには多くの作成者がいる可能性があるため、「フィルター」機能を実装する必要があります。フィルターはしっかりとフィルターをかけます。したがって、訪問者は選択メニューから会社の1つを選択し、その会社で働いている著者のみが表示されます。他の人は隠す必要があります。

「すべて表示」オプションもあります。これは明らかに、ページ上のすべての作成者を表示します。これはデフォルトのオプションです。

私の質問

同様の場合に再利用可能なコードでこれを達成する方法はありますか？（多分国、言語、または果物をフィルタリングするために、あなたは私が何を意味するか知っています）。

ここで他の解決策を見ていると、これが見つかりましたが、彼の場合にはあまりにも具体的です。それも少し頭上にあるので、この場合にどのように適応させるかわかりません。

前もって感謝します。

4

4 に答える 4

2

これはどう？

http://jsfiddle.net/4PsTM/

<select name="business-law" id="business-law" class="filter">
  <option value="view-all">&mdash; View All</option>
  <option value="firm-name">Firm name 1</option>
  <option value="other-firm">Firm name 2</option>
  <option value="another-one">Firm name 3</option>
  <option value="final-firm-name">Firm name 4</option>
</select>

<div class="firms">
<div class="firm-name">Author 1 info</div>
<div class="firm-name">Author 2 info</div>
<div class="other-firm">Author 3 info</div>
<div class="another-one">Author 4 info</div>
<div class="final-firm-name">Author 5 info</div>
<div class="final-firm-name">Author 6 info</div>
</div>​

このJavascriptで：

$("#business-law").change(
    function()
    {
        var selected = $(this).val();
        if (selected == 'view-all') {
            $('.firms').children().show();
        }
        else {
            $('.firms .'+selected).show();
            $('.firms :not(.'+selected+')').hide();
        }
    });​
于 2012-06-22T18:02:18.427 に答える
2

このようなものはどうですか：

$('.filter').on('change',function(){
    if($(this).val()=='view-all'){
        $('div').show();
    }else{
        $('div').hide();
        $('.'+$(this).val()).show();
    }
});

これがフィドルです：http：//jsfiddle.net/MHPPE/

于 2012-06-22T17:59:31.570 に答える
1

他の解決策は正しいですが、「すべて表示」を省略しています。

$('#business-law').on('change', function() {
    if ($(this).val() == 'view-all') {
        $('div').show();
    } else {
        $('div').hide();
        $('.' + $(this).val()).show();
    }
});
于 2012-06-22T18:01:45.977 に答える
0 
$('.filter').on('change',function(e){
  var val = $(this).val();
  $('.'+val).show();
});

これにより、選択したオプションのvalue属性と一致するクラス名を持つ要素が表示されます。

于 2012-06-22T18:00:05.353 に答える