Блог

Я пытаюсь связаться с activate/deactivate пользователем, нажав на привязку. Список пользователей генерируется динамически из цикла. Ниже приведен один пример тега привязки.

 <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactivate">Activated</a>
  

Они ajax call/database updates/response работают нормально. Что я хочу, так это соответствующим образом изменить вышеуказанный привязку с обновленной href, class, title and text информацией об успехе. Для примера теперь он должен измениться на

 <a href="http://www.example.com/users/activate/44" class="btn btn-danger" title="Activate">Inactive</a>
  

У меня есть следующий код jquery:

 $(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 

    if(status === 'activate'){
        $.post("users/"   status   "/"   userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                //Edit added code
                $self.text("Activated");
                $self.attr('href', "http://www.example.com/users/deactivate/" userid);
                $self.attr('class', "btn btn-success");
                $self.attr('title', "Deactivate");
            }
        });

    }

    if(status === 'deactivate'){
        $.post("users/"   status   "/"   userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //Edit added code
                $self.text("Inactive");
                $self.attr('href', "http://www.example.com/users/activate/" userid);
                $self.attr('class', "btn btn-danger");
                $self.attr('title', "Activate");
            }
        });

    }

});
  

Редактировать:

Я добавил код внутри успешного ответа. Хотя кажется, что он работает нормально, он выглядит не совсем правильно для меня или нет? Я должен отвести курсор и снова сфокусироваться, чтобы увидеть изменения в href и title .

Кажется довольно простым, если я не неправильно понял проблему. Используйте замену строки и attr для изменения атрибутов. Используйте removeClass и addClass для изменения классов. $self уже указывает на конкретную ссылку, которая вызвала событие.

 $(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 

    if(status === 'activate'){
        $.post("users/"   status   "/"   userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                $self.text("Activated");
                // what to do here
                $self.attr('href', $self.attr('href').replace('activate', 'deactivate'));
                $self.removeClass('btn-danger').addClass('btn-success');
                $self.attr('title', 'Activate');
            }
        });

    }

    if(status === 'deactivate'){
        $.post("users/"   status   "/"   userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //what to do here
                $self.text("Inactive");
                $self.attr('href', $self.attr('href').replace('deactivate', 'activate'));
                $self.removeClass('btn-success').addClass('btn-danger');
                $self.attr('title', 'Deactivate');
            }
        });

    }
});
  

Простой макет: http://jsfiddle.net/TrueBlueAussie/9gLta/2 /

Я отключил вызовы Ajax, чтобы протестировать его.

Обновление: Обратите внимание, что код вопроса был изменен после публикации, чтобы включить большую часть этого кода.