类导致tr不响应。

Question

我有这个脚本，有td类的行“奇数”不会切换没有类“奇数”的行的蓝色。有人知道为什么吗？

编辑:当你点击一行(tr)，它应该是切换蓝色(.hltclick)，当你再次点击它，它应该切换回原来的颜色。由于某些原因，将类.odd应用于它们的tr将不会切换蓝色

 //Used to make a row turn blue if available 
    $('tr:not(thead tr)').toggle(function() {
        $(this).addClass("hltclick");   },
    function() {
        $(this).removeClass("hltclick");
    });

而这张桌子

<table>
  <thead>
     <tr class="border">
       <td>Start Time</td>
       <td>End Time</td>
     </tr>
  </thead>
  <tbody>   
     <tr class="border">
       <td class="odd"><a href="#">7:00am</a></td>
       <td class="odd"><a href="#">8:00am</a></td>
     </tr>
     <tr class="border">
        <td><a href="#">8:00am</a></td>
        <td><a href="#">9:00am</a></td>
     </tr>
     <tr class="border">
        <td class="odd"><a href="#">9:00am</a></td>
        <td class="odd"><a href="#">10:00am</a></td>
      </tr>
      <tr class="border">
        <td><a href="#">10:00am</a></td>
        <td><a href="#">11:00am</a></td>    
      </tr>
      <tr class="border">
        <td class="odd"><a href="#">11:00am</a></td>
        <td class="odd"><a href="#">12:00pm</a></td>
      </tr>
      <tr class="border">
        <td><a href="#">1:00pm</a></td>
        <td><a href="#">2:00pm</a></td>
      </tr>
      <tr class="border">
        <td class="odd"><a href="#">2:00pm</a></td>
        <td class="odd"><a href="#">3:00pm</a></td>
      </tr>
      <tr class="border">
        <td><a href="#">3:00pm</a></td>
        <td><a href="#">4:00pm</a></td>
      </tr>
      <tr class="border">
        <td class="odd"><a href="#">4:00pm</a></td>
        <td class="odd"><a href="#">5:00pm</a></td>
      </tr>
   </tbody>
</table>

而这个css

#calendar {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px; padding:15px; 
  clear:both; padding:15px;
} 
body { 
  color:#222222;
  font-family:sans-serif;
  font-size:12px; 
} 
table  { 
  border:1px
  solid white; 
  border-collapse:collapse;
  margin:0 0 30px; 
  width:100%; 
}
.border  {
  border:1px solid #333134; 
}
thead tr {
  background:none repeat scroll 0 0 #B7EBFF; 
  color:#333134; 
  font-size:24px; 
  font-weight:bold; }
tr {
  background:none repeat scroll 0 0 #616062; 
  font-size:16px; 
} 
thead td {
  font-family:"Century Gothic",Arial;
  padding:5px 0 20px 5px; 
}
tr.border thead tr {
  color:#333134; font-size:24px;
  font-weight:bold; 
}  
tr { 
  font-size:16px; 
}
.odd {
background:#49484A;
}
.hltclick{
background:#00AAEC;
}

Answer 1

重新:编辑和更清晰的问题：

实际上，它是在切换颜色。它运行得很好。我们的想法是，正如jdigital所指出的那样，您可以得到这些TD填充的“奇怪”类。

想想看，你的开关功能会打开和关闭窗户上的百叶窗，但在一些窗户上，你会看到这些蓝色的大窗帘遮住了窗户。你要怎么看百叶窗开着又关着？当然，把窗帘拿开。

如果您想要交替的颜色，那么您将希望那些应用到行。(或类推，百叶窗;)

想看看它的动作吗？单击此处。

Answer 2

如果您的jQuery代码段是正确的，那么您的代码就有一个错误。尝试：

$("tbody > tr").toggle(function() {
  $(this).addClass("hltclick");
}, function() {
  $(this).removeClass("hltclick");
});

我假设您只想将此应用于<tbody>中的<tbody>元素？如果是这样，"tr:not(theadtr)"或"tr:not(thead tr)"是不正确的。我不确定这是否与你的问题有关，但无论如何你应该纠正它。

此外，为什么将odd类应用于表单元格？为什么不去划船呢？这样会更准确，也不那么冗长。

最后，您还没有在上面的CSS中定义hltclick类。

Answer 3

可能是这样(请注意头部和tr之间的空格)：

 $('tr:not(thead tr)').toggle(function() {
    $(this).addClass("hltclick");   },
function() {
    $(this).removeClass("hltclick");
});