Suppose this code:
jQuery(function($) {
$(document).find('.answer-choice').on('click', function() {
$(this).addClass('loading-gif');
var form = $('form#submit_quiz');
var quiz = form.find('input[name="quiz"]').val();
var ticket = form.find('input[name="ticket"]').val();
var _wpnonce = form.find('input[name="ticket_nonce"]').val();
$.ajax({
url: public_quiz_participation.ajax_url_answer_question,
method: 'post',
//dataType: 'json',
data: {
action: 'lottery_answer_question',
status: 'answered_question',
quiz: quiz,
ticket: ticket,
question: $(this).data("question"),
answer: $(this).data("answer"),
_wpnonce: _wpnonce
},
success: function(response) {
console.log($(this));
// Here, among some other things, I want to 1. remove the class 'loading-gif' from the choice the user clicked, and 2. (with the help of some DOM tree traversing) add a 'disabled' class to that answer and the rest choices (its siblings) of the particular question. Part 2. is actually easy enough. My problem is that $(this) isn't available anymore to the success event function.
},
error: function() {
swal.fire({
type: 'info',
html: "<h2>" + quiz.loadResource + "</h2><br><h6>" + quiz.somethingWentWrong + "</h6>"
});
}
});
});
});
Basically my question is in a comment in the code above, but I'm pasting it below also, so that it's more readable:
Here, among some other things, I want to 1. remove the class 'loading-gif' from the choice the user clicked, and 2. (with the help of some DOM tree traversing) add a 'disabled' class to that answer and the rest choices (its siblings) of the particular question. Part 2. is actually easy enough. My problem is that $(this) isn't available anymore to the success event function.
So, how can I pass the $(this) as a variable to the success event's function?