Передача переменных на анонимные функции

Question

Это то, что мне нужно, чтобы узнать какое-то время, и мне интересно, могут ли какие-либо эксперты javascript указать мне в правильном направлении.

Многие библиотеки, которые я использовал, кажется, принимают указатели на функции в качестве аргументов, например, крючок для успеха, терпят неудачу, и т.д. Вот простой пример этого в приложении, я работаю над:

$('.clock-btn').each(function(){ 
$(this).click(function(){ 
    $.ajax(
     { 
      url:'punch.php?task_id=' + $(this).data('task-id'), 
      success: function() { 
       reverseCSS($(this)); 
      }, 
      error: function() { 
       window.alert("Clocking time to this project is not allowed."); 
      } 
     } 
    ); 
}); 

});

Функция reverseCSS() - функция, которая изменяет кнопку на анимацию и заменяет слова «clock-in/clock-out» в зависимости от того, что было ранее.

Однако я не могу получить доступ к переменной $ (этой) в вызове $.ajax. Это ожидаемое поведение для меня, как я знаю в этом примере, $(this) будет $.ajax object, а не элементом, который мне нужен из html.

Итак, что было бы лучшим способом получить доступ к элементу $(this)?

Большое спасибо за помощь.

Answer 1

Это то, что bind() функция делает:

$('.clock-btn').each(function(){ 
$(this).click(function(){ 
    $.ajax(
     { 
      url:'punch.php?task_id=' + $(this).data('task-id'), 
      success: function() { 
       reverseCSS($(this)); 
      }.bind(this) 
     } 
    ); 
}); 

он просто возвращает функцию, которая всегда работает в контексте вы даете ему, в этом случае контекст this

Answer 2

$('.clock-btn').each(function(){ 
    $(this).click(function(){ 
     var that = this; // save it to another variable 
     $.ajax({ 
      url:'punch.php?task_id=' + $(this).data('task-id'), 
      success: function() { 
       reverseCSS($(that)); 
      }, 
      error: function() { 
       window.alert("Clocking time to this project is not allowed."); 
      } 
     }); 
    }); 
}); 

Answer 3

Что-то вдоль линии:

$(this).click(function() { 
    var $self = $(this); 

    $.ajax({ 
    url:'punch.php?task_id=' + $(this).data('task-id'), 
     success: function() { 
     reverseCSS($self); 
     }, 

     // ...