Вызовите ajax, чтобы проверить состояние, затем добавьте класс css.

Question

Я использую jQuery для циклического просмотра списка событий и проверки статуса посещаемости пользователей.Простой вызов ajax с использованием значения rel для event_id приводит к результату «0» или «1».

Если посещаемость положительная (1), то я хочу добавить класс .selected кссылка.

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

Вот мой HTML:

<a class="icon attend tip" href="#" title="RSVP Your Attendance" rel="59"></a>

Вот мой jQuery:

    $('a.attend').each(function(index) {

        $.ajax({
          url: '<?php echo site_url('ajax/event_attendance_status') ?>/' + $(this).attr('rel'),
          success: function(data) {         
            if (data == '1') {
                $(this).addClass('selected');
            };
          }
        });

    });

Answer 1

Когда вы находитесь внутри функции обратного вызова, контекст функции отличается от того, когда вы настраиваете запрос.Следовательно, этот объект относится к чему-то другому (в данном случае я думаю, что это XMLHttpRequest объект.)

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

var element = $(this);
$.ajax({
    url: '<?php echo site_url('ajax/event_attendance_status') ?>/' + $(this).attr('rel'),
    success: function(data) {         
        if (data == '1') {
            $(element).addClass('selected');
        };
    }
});

Альтернативное, откровенно более приятное и элегантное решение - использовать jQuery.proxy метод для обеспечения обратного вызова в правильном контексте.

$.ajax({
    url: '<?php echo site_url('ajax/event_attendance_status') ?>/' + $(this).attr('rel'),
    success: jQuery.proxy(function(data) {         
        if (data == '1') {
            $(this).addClass('selected');
        }, this);
    }
});