Question

我有以下jQuery代码：

$("#dataTable tbody")
    .on("click", "tr", function (event) {
        $(oTable.fnSettings().aoData).each(function () {
            $(this.nTr).removeClass('row_selected');
        });
        $(this).addClass('row_selected');
        var rk = $(this).attr('data-rk');
        var pk = $(this).attr('data-pk');
        var en = $(this).attr('data-entity');
        var row = $(this).attr('id').split("_")[1];
        var tab = $(this).attr('data-table');
        var params = '?pk=' + pk + '&rk=' + rk;
        var id = en + " " + pk + " - " + rk;

        $("#deleteLink")
            .attr('data-href', '/Admin/' + tab + 's/Delete' + params)
            .attr('data-row', row)
            .attr('data-entity', en)
            .attr('data-title', 'Delete ' + id)
            .attr('title', 'Delete ' + id)
            .prop('disabled', false);

    });

有没有办法可以将此代码移动到函数中？我特别担心如何使用$（this），而不是匿名函数的一部分。

Answer 1

你是说这个意思吗？（顺便说一句，我稍微重构了你的代码）

var clickHandler = function () {
    $( oTable.fnSettings().aoData ).each(function () {
        $( this.nTr ).removeClass( 'row_selected' );
    });

    $( this ).addClass( 'row_selected' );

    var rk = $( this ).data( 'rk' );
    var pk = $( this ).data( 'pk' );
    var en = $( this ).data( 'entity' );
    var row = this.id.split( '_' )[1];
    var tab = $( this ).data( 'table' );
    var params = '?pk=' + pk + '&rk=' + rk;
    var id = en + ' ' + pk + ' - ' + rk;

    $( '#deleteLink' )
        .attr({
            'data-href': '/Admin/' + tab + 's/Delete' + params,
            'data-row': row,
            'data-entity': en,
            'data-title': 'Delete ' + id,
            'title': 'Delete ' + id
        })
        .prop( 'disabled', false );
};

然后：

$( '#dataTable' ).on( 'click', 'tbody tr', clickHandler );

Answer 2

匿名功能并不是那么特别，只需制作一个普通的功能然后传递它

function external(event) {
    $(oTable.fnSettings().aoData).each(function() {
        $(this.nTr).removeClass('row_selected');
    });
    $(this).addClass('row_selected');
    var rk = $(this).attr('data-rk');
    var pk = $(this).attr('data-pk');
    var en = $(this).attr('data-entity');
    var row = $(this).attr('id').split("_")[1];
    var tab = $(this).attr('data-table');
    var params = '?pk=' + pk + '&rk=' + rk;
    var id = en + " " + pk + " - " + rk;
    $("#deleteLink").attr('data-href', '/Admin/' + tab + 's/Delete' + params).attr('data-row', row).attr('data-entity', en).attr('data-title', 'Delete ' + id).attr('title', 'Delete ' + id).prop('disabled', false);
}
//Pass the function like any other variable
$("#dataTable tbody").on("click", "tr", external);

Answer 3

当然！只需创建一个接受事件作为参数的函数：

$("#dataTable tbody").on("click", "tr", clickHandler);

var clickHanlder = function (event) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(this).addClass('row_selected');
    var rk = $(this).attr('data-rk');
    var pk = $(this).attr('data-pk');
    var en = $(this).attr('data-entity');
    var row = $(this).attr('id').split("_")[1];
    var tab = $(this).attr('data-table');
    var params = '?pk=' + pk + '&rk=' + rk;
    var id = en + " " + pk + " - " + rk;

    $("#deleteLink")
        .attr('data-href', '/Admin/' + tab + 's/Delete' + params)
        .attr('data-row', row)
        .attr('data-entity', en)
        .attr('data-title', 'Delete ' + id)
        .attr('title', 'Delete ' + id)
        .prop('disabled', false);

};

在这种情况下，

jQuery会正确绑定$(this)。

如何使用jQuery将我的匿名函数移动到外部函数？

3 个答案: