Question

我有一个用于创建jquery数据表的类，它可以工作，但我遇到了以下代码的一些问题：

 let table = $("#" + this.name).DataTable();
 table.on( 'click', 'tr td.details-control', function() {
        let detailRows = [];
        let tr = $(this).closest('tr');
        let row = table.row( tr );
        let idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            let rowData = table.row(tr).data();
            row.child(this.formatChildRows( rowData ) ).show();

            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

由于“this”在javascript中的工作方式，不再找到函数formatChildRows，因为这不再引用类而是引用表行，我通过更改代码解决了这个问题：

table.on( 'click', 'tr td.details-control', (event) => {
    ...
} );

现在该函数已运行，但“table”变量不再可访问，因为它在箭头函数中未定义。

我尝试过很多东西：

evt => function(table) {}

而不是：

(event) =>

我认为这可能有效，但函数内部的代码由于某种原因不再被执行。

有什么想法吗？

Answer 1

这应该有效：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style type="text/css">

    </style>
</head>
    <script type="text/javascript">
        var url = "http://dbpedia.org/sparql";
        var query = [
            "PREFIX dbpedia2: <http://dbpedia.org/resource/>",
            "PREFIX Abs: <http://dbpedia.org/ontology/>",
            "SELECT ?abstract",
            "WHERE {",
            "?s dbpedia2:Civil_engineeringe\"@en;",
            "Abs:abstract ?abstract",
            "}"
        ].join(" ");

        var queryUrl = url+"?query="+ encodeURIComponent(query) +"&format=json";
        $.ajax({
            dataType: "jsonp",
            url: queryUrl,
            success: function( _data ) {
                var results = _data.results.bindings;
                for ( var i in results ) {
                    var res = results[i].abstract.value;
                }
            }
        }).done(function(res){
            $("#abstract").html(res);
        });
    </script>
    <body>
        <div id="abstract">
        </div>
    </body>
</html>

但如果可能，您应该避免使用const self = this; table.on( 'click', 'tr td.details-control', function (event){ row.child(self.formatChildRows( rowData ) ).show(); ... } );关键字，例如，您应该直接引用对象this。

带箭头功能的Javascript传递参数

1 个答案: