Javascript 切换答案

【问题标题】：Javascript TogglingJavascript 切换
【发布时间】：2009-12-04 10:44:50
【问题描述】：

我正在尝试获得切换效果，但不太确定如何操作或寻找什么。（我已经加载了 Jquery）。

假设 html 类似于

<table class="left-dates">
    <tr><td>All Dates</td></tr>
    <tr><td>01 dec 2009</td></tr>
    <tr><td>02 dec 2009</td></tr>   
    <tr><td>03 dec 2009</td></tr>   
    <tr><td>04 dec 2009</td></tr>   
</table>

<div class="box 01-dec-2009">
    foo
</div>

<div class="box 03-dec 2009">
    bar
</div>

<div class="box 04-dec-2009">
    foobar
</div>

采取的步骤

显示所有 div
单击日期的 td 将隐藏除单击当天类的 div 之外的所有内容
点击“所有日期”将再次显示所有内容

知道我怎样才能干净地做到这一点吗？理想情况下使用 JQuery。

【问题讨论】：

标签： javascript jquery html xhtml toggle

【解决方案1】：

我会这样尝试：

var $boxes = $('div.box');

$('.left-dates td:gt(0)').click(function(e){
   var class = this.innerHTML.replace(/ /g, '-'); // Convert text to class
   $boxes.filter(':visible').not('.' + class).hide(); // All visible div.box that don't have the class we are going to show.
   $boxes.filter('.' + class).show(); // Show this class
});
$('.left-dates td:first').click(function(e){
   $boxes.show();
});

编辑：我将.click() 换成了.live('click')。如果会有大量行，最好使用.live() 而不是将click() 事件绑定到每个td

另外，您发布的 HTML 有错误。 03 div 在 2009 之前缺少一个连字符

【讨论】：

刚刚对我的代码发布了一个小修复。替换功能只查找第一个空格，而不是所有空格。
实时选择器的开销很大。它将在每个文档单击事件上运行。最好将任何实时事件保留在简单的选择器中，否则使用原生事件委托
我是这么认为的，直到我参加了波士顿的#jqcon，核心团队成员告诉我不然。 live 比为每个事件绑定单独的点击方法更快更精简。
我认为问题在于选择器在每次单击文档时都会一遍又一遍地运行。这就是为什么他们要为 1.4 添加上下文，这样您就可以一直委托给容器而不是文档
@redsquare 哈哈...这就是我过度优化代码的结果:) 根据您的建议，我更新了我的示例，如果有很多行，则为 .live 留下建议。

【解决方案2】：

这是一个使用 jQuery 的工作示例。

请注意，我必须更改您的 div 类和 td 标签以删除空格，以便标签等同于类名。如果您不希望标签中出现破折号，您可以在 Javascript 中进行字符串操作以删除空格或为 tds 提供与其相应 div 相同的类名，然后查看单击的 td 的类名而不是它的内部文本。

<html>
<head>
    <title>jQuery hiding example</title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('td').click(function() {
                var target = $(this).text();
                if (target == 'All Dates') {
                    $('div.box').show();
                } else {
                    $('div.box').hide();
                    $('div.' + target).show();
                }
            });
        });
    </script>
</head>
<body>
    <table class="left-dates">
        <tr><td>All Dates</td></tr>
        <tr><td>01-dec-2009</td></tr>
        <tr><td>02-dec-2009</td></tr>       
        <tr><td>03-dec-2009</td></tr>       
        <tr><td>04-dec-2009</td></tr>       
    </table>

    <div class="box 01-dec-2009">
        foo
    </div>

    <div class="box 03-dec-2009">
        bar
    </div>

    <div class="box 04-dec-2009">
        foobar
    </div>
</body>
</html>

【讨论】：

快速而干净，我实现了一个黑客版本，但你给了我所有我需要的信息，谢谢。接受:)

【解决方案3】：

唯一标识您的<td>All Dates</td>。为您的所有日期<td>s 分配相同的类或其他标识符。给他们一个点击处理程序，隐藏所有 .box 元素，除了具有相同日期的元素。在您的示例中，您与使 <td> 中的日期与您的 div 中日期的类名不一致，您将需要这样做。

<table class="left-dates">
    <tr><td id="alldates">All Dates</td></tr>
    <tr><td id="date">01 dec 2009</td></tr>
    <tr><td id="date">02 dec 2009</td></tr>       
    <tr><td id="date">03 dec 2009</td></tr>       
    <tr><td id="date">04 dec 2009</td></tr>       
</table>

// unhide all box elements
$("#alldates").click(function(e){ $(".box").show(); });

// For each date <td> element
$("#date").each(function(){
   // assign a click event
   $(this).click(function(e){
      // when the user clicks, get the
      // <td>'s text contents
      var myval = $(this).text();
      // and grab each element with the
      // 'box' css class
      $(".box").each(function(){
         // for each of these 'box' elements,
         // if it has a class matching the date
         // they selected, return
         if($(this).has(myval))
         {
            return;
         }
         else
         {
            // otherwise, hide itself
            $(this).hide();
         }
      });
   });
});

【讨论】：