Question

我有这个脚本，并且td类为“odd”的行不会切换没有类“odd”的行的蓝色。谁知道为什么？

编辑：当您单击一行（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

如果您的jQuery代码段正确，则代码有错误。尝试：

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

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

另外，为什么将odd类应用于表格单元格？为什么不到行？它会更准确，更简洁。

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

Answer 2

回复：编辑和更清晰的问题：

实际上，切换颜色。它运行得很好。正如jdigital所指出的那样，你认为这些TD的东西是“奇怪”的。

想象一下，你的切换功能可以打开和关闭窗户上的百叶帘，但在某些窗户上，你可以看到覆盖窗户的这些大蓝色窗帘。你怎么会看到百叶窗打开和关闭？当然，取下窗帘。

如果你想要交替颜色，那么你会想要那些应用于ROW的颜色。（或者在类比的情况下，百叶窗;））

想看看它在行动吗？ Click here

Answer 3

可能这个（注意thead和tr之间的空格）：

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

Answer 4

除了我们解决问题所需的CSS规则之外，您已经向我们提供了所有CSS规则：hltclick和odd。

但是，根据您的描述，odd样式可能会覆盖hltclick样式。这可能是一个简单的排序问题（可以通过将hltclick规则移到odd规则之后来解决），也可能更复杂一些（搜索css rule specificity以获取更多信息风格如何级联）。

几张海报指出，JQuery选择器中可能存在规则;这可能是真的，但这不会影响这一特定问题。

另请注意，JQuery有一个:odd选择器，可以让您消除class='odd'属性。

td上的类导致tr不响应

4 个答案: