Question

我在这里看过类似的解决方案，但它们太具体了。我的案例需要更一般的解决方案。基本上可以重复使用的东西，无论显示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>

我的案例

我正在建立一个列出律师事务所作者的页面。名单中有很多作者，其中很多都属于同一家律师事务所。

我的问题

由于页面可能有很多作者，我需要实现“过滤”功能。过滤器将按公司过滤。因此，访问者从选择菜单中选择一个公司，并且只显示为该公司工作的作者。其他人应该隐藏。

还有一个“查看全部”选项，显然，这将显示页面上的每个作者。这是默认选项。

我的问题

知道如何使用在类似情况下可重用的代码来实现这一目标吗？（也许过滤国家，语言或水果，你知道我的意思）。

在这里查看其他解决方案时，我发现了this one，但它太具体了。这也是我的一点点，所以我不知道如何适应这种情况。

提前致谢。

Answer 1

这样的事情怎么样：

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

这是一个小提琴：http://jsfiddle.net/MHPPE/

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

Answer 3

其他解决方案是正确的，但他们忽略了“全部查看”：

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

Answer 4

$('.filter').on('change',function(e){
  var val = $(this).val();
  $('.'+val).show();
});

这将显示具有与所选选项的value属性匹配的类名的任何元素。

jQuery - 显示选择菜单中的内容（更一般的方法）

4 个答案: