在点击时隐藏条件标签

Question

我的html是这样的:

星期一，星期二，星期三，星期四星期五星期六星期日

<a href="#Monday" id="ABC-1">Monday/a>
like that for all...
and its displaying information related to all of them
<table>
<tr id="Day-1">
    <td></td>
</tr>    
<tr class="odd">
     <td></td>
</tr>    
<tr class="even">
     <td></td>
</tr> 
<tr id="Day-2">
    <td></td>
</tr>     
<tr class="even">
    <td></td>
</tr>     
<tr class="odd">
    <td></td>
</tr>   
<tr class="even">
 <td></td>
</tr>
<tr id="Day-3">
   <td></td>
</tr>     
<tr class="odd">
  <td></td>
</tr> 
<tr id="Day-4">

……

nd so on..
I want that when I click Monday it should hide all the tr tags except..
 <tr id="Day-1">
    <td></td>
</tr>    
<tr class="odd">
     <td></td>
</tr>    
<tr class="even">
     <td></td>
</tr> 

(tr tags before next tr id="Day-2">)

，同样，当我点击星期二，它应该显示tr id="Day-2"和tr标签没有id和隐藏它的其余部分。

注意:您可以将id="Day-1"表示星期一，id="Day-2 "表示星期二，同样地，Day-5表示星期五…

所以当我点击星期五时，我想在它下面显示id=Day-5和几个tr标签…

<tr id="Day-5>
<tr class="Even">
<tr class="even">    
<tr class="odd">
<tr class="even">

Answer 1

可以做如下操作…

不确定ABC-1在day链接中与Day-1在表行中背后的逻辑，但this将弥补这一点。

每次单击一天中的一行时循环行。当循环到达正确的日期时，一个标志被设置为显示下一组奇数/偶数行，直到它到达ID中含有"day"的下一行。

例子jsfiddle

var $rows = $('table tr');
$('#days a').click(function() {
    var $that = $(this);
    var id = $that.attr('id').replace('ABC', 'Day');
    var isEvenOdds = false;
    $rows.each(function() {
        var $that = $(this);
        if ($that.attr('id') === id) {
            $that.show();
            isEvenOdds = true;
        } else {
            if ($that.attr('id') && $that.attr('id').indexOf('Day') > -1 && isEvenOdds) {
                isEvenOdds = false;
            }
            if (!isEvenOdds) {
                $that.hide();
            } else {
                $that.show();
            }
        }
    });
});

Answer 2

好吧，你的代码是有点奇怪的标记，但假设我是正确阅读你的问题，沿着这些行的东西将工作:

HTML:

<table>
    <tr class="mon">
        <td></td>
    </tr>
    <tr class="tues">
        <td></td>
    </tr>
</table>
<a href="#mon" rel="mon" class="showdates">Monday</a>

JS/jQuery:

$('a.showdates').click(function(e){
    e.preventDefault();
    var day = $(this).attr('rel');
    $('tr').hide().
    $('tr.'+day').show();
});

我还没有测试过这个，所以你可能需要调整，但基本的概念是这样的:为需要显示/隐藏的元素分配一个类。在我的例子中，它是<tr>标签，但在您的情况下可能是<td>或<div>。

单击时，隐藏所有这些标记，然后仅显示带有适当类的标记，该类作为属性存储在被单击的元素中。