如何定位一个超出其各自功能的 "this"？

Question

抱歉，如果该标题令人困惑。基本上，我不得不重写我的代码来实现历史api。以下是之前和之后。您可以看到在之前，this 关键字相对于 .post-link 效果如何。但是，在 after 中，this 关键字不再起作用，因为没有相对点。我如何确保 after 函数中的 link 是相对于 .post-link 的目标，.post-link 现在是一个单独的函数？

之前：相对于 .post-link.

，this 一切正常

$('#content').on('click', '.post-link', function(e) {
    e.preventDefault();

    var post_id = $(this).data('id'),
        projectTitle = $(this).data('title'),
        projectSlug = $(this).data('slug'),
        ajaxURL = site.ajaxurl;

    $('<span class="loading-icon"></span>').insertBefore(this);
    $(this).closest('article.project').addClass('active');

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        context: this,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('.loading-icon').remove();
            $(this).closest('article.project').removeClass('active');
            $('#project-container').html(response);

            return false;
        }
    });
});

之后：现在亲戚 link (.post-link) 不见了，所以所有 this 关键字都不能正常工作（在下面标记为注释） .

(function($) {
    function openProject() {
        var post_id = $(this).data('id'),                                 // this
            ajaxURL = site.ajaxurl;

        $('<span class="loading-icon"></span>').insertBefore(this);       // this
        $(this).closest('article.project').addClass('active');            // this

        $.ajax({
            type: 'POST',
            url: ajaxURL,
            context: this,                                                // added this
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {
                $('.loading-icon').remove();
                $(this).closest('article.project').removeClass('active'); // this

                $('#project-container').html(response)

                return false;
            }
        });
    }

    // User event
    $('#content').on('click', '.post-link', function(e) {
        e.preventDefault();

        // Variables
        var projectTitle = $(this).data('title'),
            projectSlug = $(this).data('slug');

        var newData = { project_page: site.url + '/projects/' + projectSlug };
        History.pushState(newData, projectTitle + ' | Site Title', site.url + '/projects/' + projectSlug);
        openProject();
    });

    // History event
    History.Adapter.bind(window, 'statechange', function(){
        var State = History.getState();
        $('#content').load(State.data.project_page);
    });
})(jQuery);

Answer 1

这里最简单的方法是使用 this 作为参数调用函数 openProject();：

openProject(this);

function openProject(el){
    // do stuff with $(el);
}

然而，更高级的方法是将函数绑定到 this-context 或在特定上下文中调用函数：

// binds the function to the object given.
// Whenever you call the function now `this` will refer to the given object
openProject.bind(this); 
openProject.apply(this);  // Calls the function in the context of the given Object
openProject.call(this);  // same here

现在 openProject 函数在给定的上下文中被调用 this 在你的情况下你想要什么。
您可以通过绑定 $(this) 来改进它，而不是避免在您使用 this

时一直调用 jquery

编辑：
我错过了 ajax 回调中的 this。此 this 与 openProject 函数中的不同，因为回调是在另一个上下文中调用的。
在 openProject 中你会这样做：

var _this = this;

$.ajax({
    // Parameter and stuff
    success: function(){ 
        // use _this here 
    }
})

您应该阅读 this 的使用以及如何处理它：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

如何定位一个超出其各自功能的 "this"？

How do I target a "this" that is outside of its respective function?

javascript

jquery

this