单击时隐藏条件标签

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 id=“Day-2”>之前的tr标记)

同样，当我单击星期二时，它应该显示tr id="Day-2“nd tr标签，而不显示id，并隐藏其余部分。

注意:您可以将id=“第1天”用于周一，将id=“第2天”用于周二，就像第5天用于周五一样……

所以当我点击星期五的时候，我想在下面显示id=Day-5和一些tr标签…

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

Answer 1

可以做类似以下的事情...

不确定day link中的ABC-1和表行中的Day-1背后的逻辑，但这将弥补这一点。

每次单击某一天的某一天时，我都会循环这些行。当循环到达正确的日期时，设置一个标志来显示下一组奇数/偶数行，直到它到达ID中包含" day“的下一行。

example 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>。

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