Question

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

之前：.post-link与$('#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; } }); });相关的一切正常。

.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);个关键字都无法正常运行（标记为以下评论）。

{{1}}

Answer 1

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

openProject(this);

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

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

// 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-callback中的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”？

1 个答案: