Question

每次提交.comment_form时，我都会调用$ .ajax（）来增加div的高度（ajax注释）。所以这样可以正常工作，但它不会保存新的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.
}

如何保存$ .ajax（）调用中的css更改？

1 个答案: