使用 jQuery 事件显示和隐藏 <div>s答案

【问题标题】：Show and hide <div>s with jQuery event使用 jQuery 事件显示和隐藏 <div>s
【发布时间】：2011-11-20 07:42:10
【问题描述】：

有几个高级 jQuery 插件可以通过相应的 id 或类过滤 <div>s。这确实是基于一个简单的 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>s，当我们从菜单中点击<li>时（例如FIRST），jQuery将过滤<div>s，只显示类为“的<div>s”第一”。

【问题讨论】：

您能详细说明您要做什么吗？ ul 与 divs 有什么关系？
其他方法是向元素（在 ul 中使用委托）添加单击绑定，该元素采用选择器单击的指示符或类（如果指示符不存在，则默认为类），然后将其用作选择器使用 jQuery .hide() 或 .show()？
@Purmou 我刚刚添加了进一步的描述以澄清问题。
你可以只使用 jQuery hasClass(): api.jquery.com/hasClass

标签： javascript jquery jquery-plugins jquery-events

【解决方案1】：

不要使用属性“indicator”，因为它不存在。使用如下的类元素。也不需要 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');
        }
    });

});

【讨论】：

【解决方案2】：

$(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

【讨论】：

【解决方案3】：

使用class 属性而不是indicator 并尝试以下操作：

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

为此，您必须为您的第一个 LI 以及所有 DIV 分配一个 all 类。希望这会有所帮助！

【讨论】：

【解决方案4】：

试试这个代码，

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

【讨论】：