Question

有几个高级jQuery插件可以通过相应的id或类过滤<div>。这确实是基于一个简单的jQuery想法，但我不确定如何实现它。考虑一个菜单来显示/隐藏内容为

<ul id="filters" class="menu" indicator="filter">
 <li><a href="#filter" indicator="*" class="selected">All</a></li>
 <li><a href="#filter" indicator=".first">First</a></li>
 <li><a href="#filter" indicator=".third">Third</a></li>
</ul>

我们想控制内容的显示：

<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>

最简单的jQuery javascript代码是什么？

默认情况下会显示所有<div>，当我们点击菜单中的<li>（例如FIRST）时，jQuery会将<div>过滤为仅显示<div>这个类是“第一个”的。

Answer 1

不要使用属性“指标”，因为它不存在。使用如下的class元素。此外，不需要A元素。

<ul id="filters" class="menu">
 <li class="selected all">All</li>
 <li class="first">First</li>
 <li class="third">Third</li>
</ul>

然后你的脚本

// hide all divs 
$('div.box').css('display','hidden');

// add click handler on control list
$('ul#filters li').click(function() {

   var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item != 'selected') {
           $('div.'+item).css('display','block');
        }
    });

});

Answer 2

使用class属性代替indicator并尝试以下操作：

$('#filters li').click(function(){
    $('div.' + $(this).attr('class')).show();
});

要使其工作，您必须为您的第一个LI以及所有DIV分配一个all类。希望这有帮助！

Answer 3

$(function(){
  $('#filters li a').live('click', function(){
    $('.box').hide();

    indirector = $(this).attr('indicator');

    indirector = indirector.substring(1);

    if(indirector == '')
      $('.box').show();   
    else
      $('div.' + indirector).show();

  });
});

Reference

Answer 4

试试这段代码，

$('#filters li').click(function(){
    $("div.box").hide();
    $('div.box' + $(this).children('a').attr('indicator')).show();
});

使用jQuery事件</div>显示和隐藏<div>

4 个答案: