Question

似乎无法正确获取<i>标识符，因此我可以删除/添加类。这就是我所拥有的，但它无法改变<i>的类。因为工作正常，所以不要理会数组和其他东西。

JS：

$('#datatable').on('click', 'tr td:first-child', function () {

    // add/remove checked, active class, and id from array 
    var id = $(this).parents('tr').attr('id');

    if ( $.inArray(id, selected) !== -1 )
    {
        $(this+ ' i').removeClass('fa-square-o').addClass('fa-check-square');
        $(this).parents('tr').addClass("active");
        //add to array
        selected.push( id );
    }
    else {
        $(this+ ' i').removeClass('fa-check-square').addClass('fa-square-o');
        $(this).parents('tr').removeClass("active");
        //remove from array
        selected.splice($.inArray(id, selected),1);
    }
    //update count
    $("#dtCount").html(selected.length);
});

HTML：

<table id="datatable">
<tr id="dtrow_1" class="odd">
    <td class=" center">
        <i class="fa fa-square-o dt-checkboxes"></i>
    </td>
    .......

修改

每个人似乎都给出了相同的答案，但这没有做任何事......

if ( $.inArray(id, selected) !== -1 )
{
    $(this).find('i').removeClass('fa-square-o').addClass('fa-check-square');
    $(this).parents('tr').addClass('active');
    //add to array
    selected.push( id );
}
else {
    $(this).find('i').removeClass('fa-check-square').addClass('fa-square-o')
    $(this).parents('tr').removeClass('active');
    //remove from array
    selected.splice($.inArray(id, selected),1);
}

Answer 1

你需要找到i元素，它是当前td的后代所以

变化

$(this+ ' i')

到

$(this).find('i');// or $('i', this)

您的选择器$(this+ ' i')执行[object HTMLDivElement] i，因为this是dom元素参考

var selected = []
$('#datatable').on('click', 'tr td:first-child', function () {

    // add/remove checked, active class, and id from array 
    var id = $(this).parents('tr').attr('id');

    //this condition is wrong
    if ($.inArray(id, selected) === -1) {
        $(this).find(' i').removeClass('fa-square-o').addClass('fa-check-square');
        $(this).parents('tr').addClass("active");
        //add to array
        selected.push(id);
    } else {
        $(this).find(' i').removeClass('fa-check-square').addClass('fa-square-o');
        $(this).parents('tr').removeClass("active");
        //remove from array
        selected.splice($.inArray(id, selected), 1);
    }
    //update count
    $("#dtCount").html(selected.length);
});

演示：Fiddle

Answer 2

i标记是当前td（事件源）的后代。您可以使用 jQuery( selector [, context ] )或find()

更改

$(this+ ' i').removeClass('fa-square-o').addClass('fa-check-square');

要

$('i', this).removeClass('fa-square-o').addClass('fa-check-square');

或者

$(this).find('i').removeClass('fa-square-o').addClass('fa-check-square');

Answer 3

使用.find

$('#datatable').on('click', 'tr td:first-child', function () {

    // add/remove checked, active class, and id from array 
    var id = $(this).parents('tr').attr('id');

    if ( $.inArray(id, selected) !== -1 )
    {
        $(this).find('i').removeClass('fa-square-o').addClass('fa-check-square');
        $(this).parents('tr').addClass("active");
        //add to array
        selected.push( id );
    }
    else {
        $(this).find('i').removeClass('fa-check-square').addClass('fa-square-o');
        $(this).parents('tr').removeClass("active");
        //remove from array
        selected.splice($.inArray(id, selected),1);
    }
    //update count
    $("#dtCount").html(selected.length);
});

有关.find()的详细信息，请参阅this。

Answer 4

这是正确的解决方案。您应该首先将html对象转换为jQuery对象＆amp;而不是尝试将字符串添加到html对象。然后在里面寻找“i”标签。

$('#datatable').on('click', 'tr td:first-child', function () {

    // add/remove checked, active class, and id from array 
    var id = $(this).parents('tr').attr('id');

    if ( $.inArray(id, selected) !== -1 )
    {
        $(this).find('i').removeClass('fa-square-o').addClass('fa-check-square');
        $(this).parents('tr').addClass("active");
        //add to array
        selected.push( id );
    }
    else {
        $(this).find('i').removeClass('fa-check-square').addClass('fa-square-o');
        $(this).parents('tr').removeClass("active");
        //remove from array
        selected.splice($.inArray(id, selected),1);
    }
    //update count
    $("#dtCount").html(selected.length);
});

JQuery：无法在点击时获得正确的标识符

4 个答案: