Question

在用Jquery隐藏表行后，我试图从Bootstrap重新应用表分条。复选框用于隐藏单元格包含“否”的行。当我使用hide（）函数时，条带在隐藏行后可以正确应用，但是如果我使用fadeOut（）函数，条带将无法正确应用

$(document).ready(function () {
    $('#customSwitch1').change(function () {
        if (!this.checked) 
            $('#indexTable tr td:contains(No)').parent().fadeIn('fast');
        else 
            $('#indexTable tr td:contains(No)').parent().hide();

        $("#indexTable tr:visible").each(function (index) {
            $(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
    });
    });
    $('#customSwitch1').change();

});

如果我用hideout替换hide（），则条纹将无法正确应用（或将持续时间添加到hide函数中）

Answer 1

您需要在淡入淡出功能中使用回调函数，以便在运行代码以重新应用分拆时，行实际上是不可见的/可见的。否则淡入淡出功能的动画将无法完成，该行仍然可见并且您的条纹被弄乱

$(document).ready(function () {
    $('#customSwitch1').change(function () {
        if (!this.checked) {
            $('#indexTable tr td:contains(No)').parent().fadeIn('slow', reapplyStripes);
        }else {
            $('#indexTable tr td:contains(No)').parent().fadeOut('slow', reapplyStripes);
        }
    });
    $('#customSwitch1').change();

});

function reapplyStripes() {
$("#indexTable tr:visible").each(function (index) {
            $(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
    });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<input type="checkbox" id="customSwitch1" />
<table class="table table-striped" id="indexTable">
<tr>
<td>YES</td>
</tr>
<tr>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
</tr>
</table>

jQuery隐藏表行hide（）vs fadeOut（）条带表

1 个答案: