javascript - 如何在点击时重置 .table-stripe 类

Question

我有一张 table ，我试图按动物类型进行排序。我已经完成了这一切，但由于某种原因，行上的条纹弄乱了。我可以有 2 行灰色条纹，彼此叠在一起。 Jfiddle

$(document).ready(function(){
// Get all the rows for the table
    $upcoming = $('#upcoming_production_sales .table');
    $events = $upcoming.find('tr.event');
    map = {};

    // Find the event category column push into map
    $events.each(function(idx,ele){ 
    diffText = $(ele).find('td.event-category').text();
    diffText = (diffText == undefined || diffText == "" ? "Other" : diffText).toLowerCase();
    if(!map[diffText]){
        map[diffText]=[];
    }
    map[diffText].push(ele);
    });

    // Get keys 
keys=Object.keys(map);
    var filterEvents = function filterEvents(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();
        });
      });
    };




    $("#upcoming_production_sales .all-upcoming-events").click(function(event){
        // Remove active class
    $("#upcoming_production_sales .nav li").removeClass('active');
    // Add active class to clicked event
    $(this).parent().addClass('active');
        filterEvents('all');
        event.preventDefault();
    });

    $("#upcoming_production_sales .cattle-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('cattle');
        event.preventDefault();
    });

    $("#upcoming_production_sales .deer-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    // Add active class to clicked event
    $(this).parent().addClass('active');
        filterEvents('deer');
        event.preventDefault();
    });

    $("#upcoming_production_sales .equine-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('equine');
        event.preventDefault();
    });

    $("#upcoming_production_sales .goat-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('goats');
        event.preventDefault();
    });

    $("#upcoming_production_sales .sheep-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('sheep');
        event.preventDefault();
    });

    $("#upcoming_production_sales .swine-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('swine');
        event.preventDefault();
    });

    $("#upcoming_production_sales .other-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('other');
        event.preventDefault();
    });


});

Answer 1

您遇到的问题是因为 :nth-child CSS 选择器仍然计算隐藏元素。这意味着仍然可见的元素上的条纹不匹配。解决方法是使用 jQuery 的 :even 和 :odd 选择器在修改过滤器时应用 strip 化。

首先，您需要从table中删除table-striped类。然后您可以添加一个函数来为您划分行。试试这个:

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>

$("#upcoming_production_sales a").click(function(event) {
    event.preventDefault();
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
    filterEvents($(this).data('filter'));
});

Working example