Объединение $ this в jQuery / Javascript с вызовом AJAX

Question

У меня есть две разные части кода, которые в основном выполняют работу по проверке, равен ли щелчок пользователя правильный ответ, и выполняют код в зависимости от равенства.

$(".practice-quiz-answer-choice").on("click",
function(event) {
  var $this = $(this);
  if ($this.text() === $(".correct-choice").text()) {
    clickSpark.setParticleImagePath('../../correct-answer-checkmark.png');
    clickSpark.setParticleCount(50);
    clickSpark.setParticleSize(20);
    clickSpark.setParticleSpeed(12);
        clickSpark.fireParticles($(this));
        toggleNav();

    $this.css({
        backgroundColor: '#78e08f',
        transition: ".25s all"
    });

    $(".practice-quiz-answer-choice").not(this).each(function(){
        $(this).css({
          backgroundColor: '#fff',
          transition: ".25s all"
      });
    });
  }
  else {
    $this.css({
        backgroundColor: '#e55039',
        transition: ".25s all"
    });
  }
});

И мой другой код AJAX,

$(document).ready(function() {
$("a.answer").on( "click", function( event ) {
var current_answer = $(this);
var question_id = '<%= mcq.id %>';
var current_user = "<%= current_user.id %>";

$.ajax({
url: "/verify_user_selected_answer",
type: "POST",
dataType: "json",
data: {user_id: current_user, question: question_id, answer: current_answer.text()},
success: function(response){
$("#display_result").text(response["result"]);
}
});
});
});

Я попытался объединить два, чтобы он отображал визуальные изменения и отправлял POST через Ajax, но он просто не работает. Как я могу это сделать?

РЕДАКТИРОВАТЬ: Вот что я имел в виду, комбинируя код ..

$(document).ready(function() {
$("a.answer").on( "click", function( event ) {
var current_answer = $(this);
var question_id = '<%= mcq.id %>';
var current_user = "<%= current_user.id %>";

var $this = $(this);
  if ($this.text() === $(".correct-choice").text()) {
    clickSpark.setParticleImagePath('../../correct-answer-checkmark.png');
    clickSpark.setParticleCount(50);
    clickSpark.setParticleSize(20);
    clickSpark.setParticleSpeed(12);
        clickSpark.fireParticles($(this));
        toggleNav();

    $this.css({
        backgroundColor: '#78e08f',
        transition: ".25s all"
    });



$.ajax({
url: "/verify_user_selected_answer",
type: "POST",
dataType: "json",
data: {user_id: current_user, question: question_id, answer: current_answer.text()},
success: function(response){
$("#display_result").text(response["result"]);
}
});
});
});

Я получаю ошибки, такие как неожиданный конец ввода или проблема с круглыми скобками. Но сам код не запускается, когда его объединено

вот мой HTML:

  <% mcq.answers.each do |answer| %>
    <div class="gr-question--choice">
      <%= link_to answer, "javascript:void(0);", class: "answer" %>
    </div>

  <% end %>

Answer 1

Правильный вывод этого кода действительно поможет вам обнаружить проблемы. Например, вот ваш код, который вы вставили выше, но я просто правильно добавил отступ.

$(document).ready(function() {
    $("a.answer").on( "click", function( event ) {
        var current_answer = $(this);
        var question_id = '<%= mcq.id %>';
        var current_user = "<%= current_user.id %>";

        var $this = $(this);
        if ($this.text() === $(".correct-choice").text()) {

            clickSpark.setParticleImagePath('../../correct-answer-checkmark.png');
            clickSpark.setParticleCount(50);
            clickSpark.setParticleSize(20);
            clickSpark.setParticleSpeed(12);
            clickSpark.fireParticles($(this));
            toggleNav();

            $this.css({
                backgroundColor: '#78e08f',
                transition: ".25s all"
            });

            $.ajax({
                url: "/verify_user_selected_answer",
                type: "POST",
                dataType: "json",
                data: {user_id: current_user, question: question_id, answer: current_answer.text()},
                success: function(response){
                    $("#display_result").text(response["result"]);
                }
            });
        });
    });

Теперь вы можете заметить пару проблем. Например, нет закрывающей скобки или закрывающей скобки для $(document).ready(function() {, иначе вы бы хорошо их выровняли. Также, если вы просто следите за отступами, вы увидите, что оператор if заканчивается скобками и круглыми скобками. Здесь я добавлю несколько комментариев, где я имею в виду:

$(document).ready(function() {
    $("a.answer").on( "click", function( event ) {
        var current_answer = $(this);
        var question_id = '<%= mcq.id %>';
        var current_user = "<%= current_user.id %>";

        var $this = $(this);
        if ($this.text() === $(".correct-choice").text()) {

            clickSpark.setParticleImagePath('../../correct-answer-checkmark.png');
            clickSpark.setParticleCount(50);
            clickSpark.setParticleSize(20);
            clickSpark.setParticleSpeed(12);
            clickSpark.fireParticles($(this));
            toggleNav();

            $this.css({
                backgroundColor: '#78e08f',
                transition: ".25s all"
            });

            $.ajax({
                url: "/verify_user_selected_answer",
                type: "POST",
                dataType: "json",
                data: {user_id: current_user, question: question_id, answer: current_answer.text()},
                success: function(response){
                    $("#display_result").text(response["result"]);
                }
            });
        });  //<= This isn't how you end an if block
    });

// No closing bracket + parenthesis. 

Просто исправь это:

$(document).ready(function() {
    $("a.answer").on( "click", function( event ) {
        var current_answer = $(this);
        var question_id = '<%= mcq.id %>';
        var current_user = "<%= current_user.id %>";

        var $this = $(this);
        if ($this.text() === $(".correct-choice").text()) {

            clickSpark.setParticleImagePath('../../correct-answer-checkmark.png');
            clickSpark.setParticleCount(50);
            clickSpark.setParticleSize(20);
            clickSpark.setParticleSpeed(12);
            clickSpark.fireParticles($(this));
            toggleNav();

            $this.css({
                backgroundColor: '#78e08f',
                transition: ".25s all"
            });

            $.ajax({
                url: "/verify_user_selected_answer",
                type: "POST",
                dataType: "json",
                data: {user_id: current_user, question: question_id, answer: current_answer.text()},
                success: function(response){
                    $("#display_result").text(response["result"]);
                }
            });
        }  
    });
});

И вы должны быть дальше. Хотя большой урок, используйте отступы, чтобы увидеть правильность своей логики. Это не только для красивости. Это действительно может быть мощным руководством.