Javascript 如何在单击时重置.table条带类

我有一张桌子，我正试着按动物类型分类。我有这一切工作，但由于某种原因，条纹的行是混乱的。我可以有两排灰色条纹排在一起

---

Bootstrap

在页面加载期间仅将alt color行应用于表行一次。因为在您的例子中，您只是隐藏了不相关的行，所以alt行的颜色将不一致。为了修复它，您需要在完成行过滤后回复样式

  $('.table-striped tr:nth-child(2n) td').css("background-color","#f9f9f9");
      $('.table-striped tr:nth-child(2n+1) td').css("background-color","#ffffff"); 

---

下面是一个工作示例：

Bootstrap

在页面加载期间仅将alt color行应用于表行一次。因为在您的例子中，您只是隐藏了不相关的行，所以alt行的颜色将不一致。为了修复它，您需要在完成行过滤后回复样式

  $('.table-striped tr:nth-child(2n) td').css("background-color","#f9f9f9");
      $('.table-striped tr:nth-child(2n+1) td').css("background-color","#ffffff"); 

---

下面是一个工作示例：

您遇到的问题是因为

：n子

CSS选择器仍然对隐藏元素进行计数。这意味着您在元素上有不匹配的条纹，这些条纹仍然可见。解决方法是使用jQuery的

：偶数

和

：奇数

选择器在修改过滤器时应用条带化

首先，您需要从

表

中删除

表条带化

类。然后，您可以添加一个函数来为您划分行。试试这个：

keys = Object.keys(map);
var filterEvents = function(diffText) {
    keys.forEach(function(key, idx, arr) {
        var hideRows = (key.toLowerCase() != diffText.toLowerCase()) && ("all" != diffText.toLowerCase());
        map[key].forEach(function(row, idx, arr) {
            if (hideRows) 
                $(row).hide();
            else 
                $(row).show();
        });
        setStripe(); //when the filter is changed
    });
};

var setStripe = function() {
    $(".table tr:visible:odd").addClass('odd').removeClass('even');
    $(".table tr:visible:even").addClass('even').removeClass('odd');
}
setStripe(); // on load

还请注意，您可以通过使用

data-*

属性来干燥过滤器

a

元素上的重复单击处理程序：

<ul class="nav nav-pills">
    <li class="active"><a class="all-upcoming-events" href="#" data-filter="all">All Events <span class='badge'>216</span></a></li>
    <li><a class="cattle-upcoming-events" href="#" data-filter="cattle">Cattle <span class='badge'>177</span></a></li>
    <li><a class="deer-upcoming-events" href="#" data-filter="deer">Deer <span class='badge'>6</span></a></li>
    <li><a class="equine-upcoming-events" href="#" data-filter="equine">Equine <span class='badge'>0</span></a></li>
    <li><a class="goat-upcoming-events" href="#" data-filter="goats">Goats <span class='badge'>10</span></a></li>
    <li><a class="sheep-upcoming-events" href="#" data-filter="sheep">Sheep <span class='badge'>0</span></a></li>
    <li><a class="swine-upcoming-events" href="#" data-filter="swine">Swine <span class='badge'>0</span></a></li>
    <li><a class="other-upcoming-events" href="#" data-filter="other">Other <span class='badge'>23</span></a></li>
</ul>

---

您遇到的问题是因为

：n子CSS选择器仍然统计隐藏元素。这意味着您在元素上有不匹配的条纹，这些条纹仍然可见。解决方法是使用jQuery的
：偶数
和
：奇数
选择器在修改过滤器时应用条带化

首先，您需要从
表
中删除
表条带化
类。然后，您可以添加一个函数来为您划分行。试试这个：

keys = Object.keys(map);
var filterEvents = function(diffText) {
    keys.forEach(function(key, idx, arr) {
        var hideRows = (key.toLowerCase() != diffText.toLowerCase()) && ("all" != diffText.toLowerCase());
        map[key].forEach(function(row, idx, arr) {
            if (hideRows) 
                $(row).hide();
            else 
                $(row).show();
        });
        setStripe(); //when the filter is changed
    });
};

var setStripe = function() {
    $(".table tr:visible:odd").addClass('odd').removeClass('even');
    $(".table tr:visible:even").addClass('even').removeClass('odd');
}
setStripe(); // on load

还请注意，您可以通过使用
data-*
属性来干燥过滤器
a
元素上的重复单击处理程序：

<ul class="nav nav-pills">
    <li class="active"><a class="all-upcoming-events" href="#" data-filter="all">All Events <span class='badge'>216</span></a></li>
    <li><a class="cattle-upcoming-events" href="#" data-filter="cattle">Cattle <span class='badge'>177</span></a></li>
    <li><a class="deer-upcoming-events" href="#" data-filter="deer">Deer <span class='badge'>6</span></a></li>
    <li><a class="equine-upcoming-events" href="#" data-filter="equine">Equine <span class='badge'>0</span></a></li>
    <li><a class="goat-upcoming-events" href="#" data-filter="goats">Goats <span class='badge'>10</span></a></li>
    <li><a class="sheep-upcoming-events" href="#" data-filter="sheep">Sheep <span class='badge'>0</span></a></li>
    <li><a class="swine-upcoming-events" href="#" data-filter="swine">Swine <span class='badge'>0</span></a></li>
    <li><a class="other-upcoming-events" href="#" data-filter="other">Other <span class='badge'>23</span></a></li>
</ul>

如果您单击“山羊”，您会发现这仍然存在问题。原因是第n个子项选择器不考虑隐藏元素。如果单击“山羊”，您可以看到仍然存在问题。原因是第n个子项选择器不考虑隐藏元素。请提供一个问题，我们可以帮助您回答。此外，发布所有代码也没有帮助。最好把你的问题分成几个小部分，提出具体的问题。请提供一个我们可以帮助你回答的问题。此外，发布所有代码也没有帮助。最好把你的问题分成几个小部分，然后问一些具体的问题。