Javascript切换

Question

I'm trying to get a toggle effect but not quite sure how to do it or what to look for. 我正在尝试获得切换效果，但不确定如何执行或寻找什么。 (i jave Jquery loaded). （我jquery加载）。

assume html similar to 假设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>

Steps to take 采取的步骤

All div's are shown 显示所有div
Clicking on a td for a date will hide all but the div with the class of the day clicked 单击某个日期的日期会隐藏除div之外的所有内容，并显示该日期的日期
clicking "All dates" will show everything again 点击“所有日期”将再次显示所有内容

any idea how i could achive this cleanly? 知道我怎么能做到这一点吗？ ideally using JQuery. 理想情况下使用JQuery。

Answer 1

I would try it this way: 我会这样尝试：

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();
});

EDIT: I swapped .click() in for .live('click') . 编辑：我交换.click()为.live('click') 。 If there were going to be a ton of rows, it might be better to use .live() instead of binding a click() event to each td 如果会有大量行，最好使用.live()而不是将click()事件绑定到每个td

Also, the HTML you posted has an error. 另外，您发布的HTML出错。 The 03 div is missing a hyphen before the 2009 03 div在2009之前缺少连字符

Answer 2

Here is a working example with jQuery. 这是jQuery的工作示例。

Note that I had to change your div classes and td labels to remove whitespace so that the labels would be equivalent to the class-names. 请注意，我必须更改div类和td标签以删除空格，以便标签与类名等效。 If you didn't want dashes in the labels you could do string manipulation in Javascript to remove white-space or give the td s the same classname as their corresponding div and then look at the classname of the clicked td rather than its inner-text. 如果您不想在标签中使用破折号，则可以在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>

Answer 3

Identify your <td>All Dates</td> uniquely. 唯一标识您的<td>All Dates</td> 。 Assign the same class or some other identifier to all your date <td>s . 为所有日期<td>s分配相同的类或其他标识符。 Give them a click handler that hides all the .box elements except the one with the same date. 给他们一个单击处理程序，该处理程序将隐藏除具有相同日期的元素之外的所有.box元素。 In your example you're not consistent with making the date in the <td> the same as the class name of the date in your divs, which you'll need for what I'll do. 在您的示例中，您不一致地将<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();
         }
      });
   });
});

Javascript切换

问题描述

3 个解决方案

解决方案1
1 2009-12-04 02:04:39

解决方案2
0 已采纳 2009-12-04 02:15:11

解决方案3
0 2009-12-04 02:18:55

Javascript切换

问题描述

3 个解决方案

解决方案1 1 2009-12-04 02:04:39

解决方案2 0 已采纳 2009-12-04 02:15:11

解决方案3 0 2009-12-04 02:18:55

解决方案1
1 2009-12-04 02:04:39

解决方案2
0 已采纳 2009-12-04 02:15:11

解决方案3
0 2009-12-04 02:18:55