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>

我的情况

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

我的问题

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

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

我的问题

知道如何使用在类似情况下可重用的代码来完成此任务吗？（也许过滤国家、语言或水果，你知道我的意思）。

在这里查看其他解决方案时，我发现了这个，但这对他的情况来说太具体了。这也有点过头了，所以我不知道如何适应这种情况。

提前致谢。

4

4 回答 4

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 回答
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 回答
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 回答