Question

我有一些问题隐藏了除了点击jQuery之外的所有其他行。

$('tr .assign').live('click', function(e) {
    var element = $(this);
    var id = $(this).data('employeeID');
    $.ajax({
        type: 'GET',
        url: 'http://domain.com/assign/'+ $(this).data('id')
    }).success(function() {
        element.text('Unassign');
        element.removeClass('assign').addClass('unassign');
        element.removeClass('btn-success').addClass('btn-inverse');
        $("tr:has(.signup_" + id + ")").hide();
        $(this).show();
    });
});

基本上，从数据库中提取的每个员工在表中都有一行，类似于下面的表。如果＆＃34;分配＆＃34;单击链接，我想隐藏表中具有相同员工ID类的所有其他行，但保持单击的行可见。

<tr class="signup_{{ $employeeID }}">
<td style="text-align:center;">{{ $employeeName }}</td>
<td style="text-align:center;"><a data-id="{{ $employeeID }}" class="btn btn-mini btn-success assign">Assign</a></td>
</tr>

使用此代码，不会隐藏任何行。但是，如果我将tr:has更改为tr:not，则除之外的所有行都将隐藏具有相同signup_employeeID类的行。

Answer 1

您可以获取父行，然后使用tr

过滤.not()

var $trs = $("tr .assign");
$('tr .assign').live('click', function(e) {
    var element = $(this);
    var this_row = element.closest("tr"); //<-- we get the parent row
    var id = $(this).data('employeeID');
    $.ajax({
        type: 'GET',
        url: 'http://domain.com/assign/'+ $(this).data('id')
    }).success(function() {
        element.text('Unassign');
        element.removeClass('assign btn-success')
        .addClass('unassign btn-inverse'); //<-- ignore this bit if you want.. just a simplification
        $("tr.signup_" + id).not(this_row).hide(); // <-- hide all except the one we specified earlier
    });
});

Answer 2

您可以使用.not：

var $assignRows = $("tr .assign");
$assignRows.live('click', function(e) {
    var element = $(this);
    var id = $(this).data('employeeID');
    $.ajax({
        type: 'GET',
        url: 'http://domain.com/assign/'+ $(this).data('id')
    }).success(function() {
        element.text('Unassign');
        element.removeClass('assign').addClass('unassign');
        element.removeClass('btn-success').addClass('btn-inverse');
        $assignRows.not(element).hide(); // Here
        $(this).show();
    });
});

这是展示.not功能的basic fiddle。

另外，请考虑切换为使用.on而不是.live - 现在已弃用long time。

Answer 3

这些方面的东西对你有用吗？

$('tr').live('click', function(e) {
    var element = $(this);
    $('tr:visible').hide();
    element.show();
});

显然，你需要调整它以适应你的情况，但它应该是一个很好的起点。

除了单击之外，隐藏具有相同类的所有其他行

3 个答案: