点击时隐藏条件标签

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="Day-1" 用于星期一，id="Day-2 用于星期二，就像 Day-5 用于星期五...

所以当我点击 Friday 时，我想在其下方显示 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-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>。

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