Javascript切换

我试图得到一个切换效果，但不太清楚如何去做或寻找什么。（我jave jquery加载）。Javascript切换

承担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的显示
点击的日期会隐藏所有，但与类的DIV一个TD拿点击一天
点击“所有日期”将再次显示所有内容

任何想法如何我可以实现这个干净？理想情况下使用JQuery。

来源

2009-12-04 Shadi Almosri

以下是jQuery的一个工作示例。

请注意，我必须更改您的div类和td标签以删除空格，以便标签将等同于类名称。如果您不想在标签中使用破折号，则可以在Javascript中执行字符串操作来删除空白区域，或者为td指定与其对应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>

来源

2009-12-04 02:15:11

更新：为“所有日期”添加了案例。 – 2009-12-04 02:26:43

快速和干净，我实现了这个黑客版本，但你给我所有我需要的信息，谢谢。接受:) – 2009-12-04 02:43:51

我会尝试这种方式：

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')交换.click()。如果将出现大量行，则最好使用.live()而不是将click()事件绑定到每个td

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

来源

2009-12-04 02:04:39

刚刚发布了一个小的修复程序到我的代码。替换功能只能找到第一个空间，而不是所有的空间。 – 2009-12-04 02:08:45

现场选择器的开销很大。它会在每个文档点击事件中运行。最好保留任何直播活动给简单的选择器，否则使用本地事件委托 – redsquare 2009-12-04 02:21:57

我认为这样，直到我参加了在波士顿的#jqcon，并被核心团队mebers否则告知。 “活着”比为每个事件绑定一个单独的点击方法令人惊讶地更快，更精简。 – 2009-12-04 02:36:29

确定您的<td>All Dates</td>是唯一的。为您的日期分配相同的班级或其他标识符<td>s。为他们提供一个点击处理程序，隐藏除了具有相同日期的元素之外的所有.box元素。在你的例子中，你将<td>中的日期与你divs中日期的类名相同，这对于我将要做的事情需要这些。

<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-04 02:18:55

Javascript切换

回答

相关问题