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之前的tr标签=“Day-2”＆gt;）

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

注意：你可以对待id =“Day-1”是星期一而id =“Day-2是星期二，就像第5天是星期五...

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

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

Answer 1

好的，您的代码有点奇怪，但假设我正确地阅读了您的问题，那么这些内容就可以了：

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

单击，隐藏所有这些标记，然后仅显示具有相应类的标记，该标记作为属性存储在单击的元素中。

Answer 2

可以执行以下操作......

不确定当天ABC-1背后的逻辑与表格行中的Day-1相关联，但这会弥补这一点。

每次点击其中一天时，我都在循环行。当循环到达正确的日期时，标志被设置为显示下一组奇数/偶数行，直到它到达下一行，ID中有“日”。

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

点击时隐藏条件标签

2 个答案: