如何将$（this）变量传递给另一个函数javascript

Question

我有一个按下按钮时调用的javascript函数。此函数使用ajax调用调用另一个函数。如果/当这个ajax成功完成时，我希望按下按钮的类改变。

$(".followUser").click(function(){
    ...
    create_friendship(that.userId, that.friendId);
    ...
}
function create_friendship(user_id, friend_id){
  $.ajax({
    type: "POST",
    ...
    success: function(data, textStatus, jqXHR){
      variableForButtonHere.html("Request sent").removeClass("btn-default").addClass('btn-info');

到目前为止，用$（this）替换variableForButtonHere并没有奏效。我已经把

了

      var mydata = $(this).data();
      window.alert(mydata.userId); 

在两个函数和它打印的第一个函数中，在第二个函数中打印undefined

我假设$（this）必须以某种方式传递给第二个函数。我该怎么做？

Answer 1

你可以很容易地做到这一点：

$(".followUser").click(function(){
    ...
    create_friendship($(this), that.userId, that.friendId);
    ...
}
function create_friendship(button, user_id, friend_id){
  $.ajax({
    type: "POST",
    ...
    success: function(data, textStatus, jqXHR){
      button.html("Request sent").removeClass("btn-default").addClass('btn-info');

Answer 2

选项1：在$.ajax电话

中设置背景信息

$.ajax有一个选项，允许您在回调函数中设置this的值。这是context。

你可以像这样使用它：

$(".followUser").click(function(){
    ...
    create_friendship(that.userId, that.friendId, this);
    ...
}
function create_friendship(user_id, friend_id, setThis){
  $.ajax({
    type: "POST",
    context: setThis,    // <=== HERE ===
    ...
    success: function(data, textStatus, jqXHR){
     // === Now, `this` will refer to your button element!
     $(this).html("Request sent").removeClass("btn-default").addClass('btn-info');

选项2：jQuery.proxy（）方法

使用jQuery.proxy功能在您的方法中设置this的值。

选项3：清除JavaScript方法

更好的是，您可以使用内置方法call和apply的JavaScripts在方法调用中设置this的值。

$(".followUser").click(function(){
    ...
    create_friendship.call(this, that.userId, that.friendId);
    ...
}
function create_friendship(user_id, friend_id, setThis){
  // Here, you can either use `context: this,` option as in first method above
  // or set your variable like so:
  var button = $(this);

  $.ajax({
    type: "POST",
    ...
    success: function(data, textStatus, jqXHR){
     // === Now, `this` will refer to your button element!
     button.html("Request sent").removeClass("btn-default").addClass('btn-info');