jQuery: возникли проблемы с выбором / действием на родительский элемент

#jquery #select #parent

#jquery #выберите #родительский

Вопрос:

Я впервые играю с jQuery и AJAX и, похоже, столкнулся с небольшим камнем преткновения при попытке удалить запись из базы данных. Или, чтобы было понятнее, элемент успешно удаляется из базы данных, но, похоже, я не могу выбрать правильный элемент, чтобы скрыть его после удаления.

Вот как выглядит некоторый пример кода (в данном случае я просто пытаюсь изменить цвет фона в целях тестирования: я буду использовать fadeOut или эквивалент в моей производственной среде — далее следует более подробное объяснение):

     //When link with class .deleter is clicked, get the parent element's id (which is also that element's id in the database)
    $('.deleter').click(function() {
        var recordToDelete = $(this).closest('ul').attr('id');

    //Send the id to the PHP script, which returns 1 if successful and 0 if not
        $.post("databasefuncs.php?func=delete", { postedMessage : recordToDelete },
            function(result){
                if(result == 1) {
                    //Change the background color of the parent UL to red if successful
                    $(this).closest('ul').css('background-color', 'red');
                } else {
                    //Change the background color of the parent UL to blue if successful
                    $(this).closest('ul').css('background-color', 'blue');
                }

            });
    });
  

Чтобы пояснить, как это выглядит во внешнем интерфейсе, мои UL настроены на отображение: table-row, мои LIS настроены на отображение: table-cell, и у меня есть DIV, который содержит их все и настроен на отображение: table. По сути, у меня есть UL для каждой записи и LI для каждого столбца в каждой записи.

Спасибо!

Ответ №1:

У вас другой контекст внутри обратного вызова AJAX. Итак, $ (this) указывает на другой объект. Я предлагаю вам использовать закрывающую переменную «item» в следующем примере:

 //When link with class .deleter is clicked, get the parent element's id (which is also that element's id in the database)
$('.deleter').click(function() {
    var item = $(this).closest('ul');
    var recordToDelete = item.attr('id');

//Send the id to the PHP script, which returns 1 if successful and 0 if not
    $.post("databasefuncs.php?func=delete", { postedMessage : recordToDelete },
        function(result){
            if(result == 1) {
                //Change the background color of the parent UL to red if successful
                item.css('background-color', 'red');
            } else {
                //Change the background color of the parent UL to blue if successful
                item.css('background-color', 'blue');
            }

        });
});
  

Комментарии:

1. Ах. Это все объясняет. В итоге я заставил его работать в основном таким же образом, но я думаю, что ваш способ может больше соответствовать соглашению. Хотите дать некоторое представление? Этот способ подходит? если (результат == 1) { $(«#» recordToDelete).css(‘background-color’, ‘red’).fadeOut(‘fast’); } else { $(«#» recordToDelete). Затухание (‘быстрое’); }

2. Да, это тоже правильное решение. В вашем случае вы просто используете переменную recordToDelete в закрытии.