Question

我正在尝试获得切换效果但不太确定如何操作或寻找什么。（我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>

采取步骤

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

任何想法我怎么能干净利落地完成这件事？理想情况下使用JQuery。

Answer 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

之前缺少连字符

Answer 2

这是jQuery的一个工作示例。

请注意，我必须更改div类和td标签以删除空格，以便标签等同于类名。如果您不想在标签中使用短划线，则可以在Javascript中进行字符串操作以删除空格，或者为td提供与其对应div相同的类名，然后查看所单击的{{1而不是它的内部文本。

td

Answer 3

唯一地标识您的<td>All Dates</td>。为您的所有日期<td>s分配相同的类或其他标识符。给他们一个点击处理程序，隐藏除具有相同日期的所有.box元素之外的所有.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();
         }
      });
   });
});

Javascript切换

3 个答案: