jquery - 如何保存在 $.ajax() 调用中所做的 css 更改？

Question

每次提交 .comment_form(ajax 注释)时，我都会调用 $.ajax() 来增加我的 div 的高度。所以这工作正常但它不保存新的 height 所以当我刷新页面时它恢复到它的初始高度。这是我的 js:

base.js

$('.comment_form').on('submit', function(e) {
e.preventDefault();

var url = window.location.href.split('?')[0];

$.ajax({
    type: 'POST',
    url: url,
    data: {
        text: $('.comment_text').val(),
        csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
},
    success: function(data) {
        console.log(data.text_length);
        if(data.text_length < 15) {
            var increaseHeight = 30;
        }
        else {
            increaseHeight = (data.text_length) + 20;
        }

        $('.commentsContainer').append("<div class='comment_div'><h3>" + data.username + "</h3><p>" + data.text + "</p></div>");
        $('.commentsContainer').css('height', '+=' + increaseHeight);
    },

});

CSS

.commentsContainer {
    height: 600px;
}

django views.py

    ...

    ajax_comment = request.POST.get('text')
    comment_length = len(str(ajax_comment))

    comments = Comments.objects.all()

    if request.is_ajax():
        if comment.is_valid():
            comment = Comments.objects.create(comment_text=ajax_comment, author=str(request.user))
            comment.save()
            username = str(request.user)
            return JsonResponse({'text': ajax_comment, 'text_length': comment_length, 'username': username})

    return render(request, 'article.html', context)

Answer 1

您可以使用 window.localStorage() 来存储高度，首先您必须检查是否有任何高度存储在这样的地方:

success: function(data) {
  console.log(data.text_length);
  var ls = window.localStorage, // <---------Initialize here 
      increaseHeight;
  if (data.text_length < 15) {
    increaseHeight = ls.getItem('height') || 30; // <-----check here if there is any
  } else {
    increaseHeight = (data.text_length) + 20;
  }

  $('.commentsContainer').append("<div class='comment_div'><h3>" + data.username 
                                  + "</h3><p>" + data.text + "</p></div>");
  $('.commentsContainer').css('height', '+=' + increaseHeight);
  ls.setItem('height', $('.commentsContainer').css('height')); //<-----store after adding.
}