Fatal编程技术网

Javascript切换

javascript jquery html

Javascript切换,javascript,jquery,html,xhtml,toggle,Javascript,Jquery,Html,Xhtml,Toggle,我试图得到一个切换效果，但不太确定如何做，或寻找什么。（i jave 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><

我试图得到一个切换效果，但不太确定如何做，或寻找什么。（i jave 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>


所有日期
2009年12月1日
2009年12月2日
2009年12月3日
2009年12月4日
福
酒吧
福巴
要采取的步骤

  • 显示所有div
  • 单击日期的td将隐藏除div之外的所有内容，并单击当天的类
  • 单击“所有日期”将再次显示所有内容
    • 你知道我怎样才能干净利落地做到这一点吗？理想情况下使用JQuery。

    我会这样尝试：

    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();
});
    编辑：我在
    中交换了
    。在
    中单击（）
    。live（'click'）
    。如果有大量行，最好使用
    .live（）
    而不是将
    click（）
    事件绑定到每个
    td
    

    另外，您发布的HTML有一个错误。
    03
    div在
    2009
    之前缺少一个连字符这里是一个jQuery的工作示例
    
请注意，我必须更改您的div类和
    td
    标签以删除空白，这样标签将与类名等效。如果您不希望标签中出现破折号，可以使用Javascript进行字符串操作以删除空白，或者为
    td
    s指定与其相应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>

    

    
jQuery隐藏示例
$（文档）.ready（函数（）{
$（'td'）。单击（函数（）{
var target=$（this.text（）；
如果（目标==“所有日期”）{
$（'div.box'）.show（）；
}否则{
$（'div.box'）.hide（）；
$（'div.+target）.show（）；
}
});
});
所有日期
01-dec-2009
02-12-2009
03-dec-2009
04-dec-2009
福
酒吧
福巴

    唯一地标识您的
    所有日期。为所有日期
    s
    分配相同的类别或其他标识符。给他们一个单击处理程序，该处理程序隐藏所有.box元素，但日期相同的元素除外。在您的示例中，您不同意将
    中的日期设置为与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();
         }
      });
   });
});

    

    
所有日期
2009年12月1日
2009年12月2日
2009年12月3日
2009年12月4日
//取消隐藏所有长方体元素
$（“#所有日期”）。单击（函数（e）{$（“.box”）.show（）；}）；
//对于每个日期元素
$（“#日期”）。每个（函数（）{
//分配一个点击事件
$（此）。单击（函数（e）{
//当用户单击时，获取
//的文本内容
var myval=$（this.text（）；
//并用
//“box”css类
$（“.box”）。每个（函数（）{
//对于每个“盒子”元素，
//如果它有一个与日期匹配的类
//他们选择了，返回
如果（$（this）.has（myval））
{
返回；
}
其他的
{
//否则就躲起来
$（this.hide（）；
}
});
});
});

    刚刚发布了我的代码的一个小补丁。replace函数只查找第一个空格，而不是所有空格。对于活动选择器来说，开销很大。它将在每个文档单击事件上运行此操作。最好将任何现场活动留给简单的选择器，否则使用本机事件委派。在我参加波士顿的#jqcon之前，我一直这么认为，但核心团队mebers告诉我不要这样做
    live
    比将单独的click方法绑定到每个事件要快得多，而且更精简。我认为问题在于，选择器在每次单击文档时都会反复运行。这就是为什么他们要为live for 1.4添加上下文，以便您可以始终委托给容器而不是文档time@redsquare哈哈。。。这就是我对代码过度优化的结果：）根据你的建议，我更新了我的示例，并留下了一条建议。如果有很多行，请使用live。快速且干净，我实现了此版本的黑客攻击，但你提供了我需要的所有信息，谢谢。已接受：）