个人中心
gpt4 book ai didi

jquery - Django:给 "task"div 添加动画，还有一些 CSS 问题

转载 作者：太空宇宙 更新时间：2023-11-03 17:31:32 25 4
gpt4 key购买 nike

在使用服务器和 jQuery 方面，我是网络开发的新手。在我做我的大就业元素之前，我正在创建一个学习 Django 的作业，只是修改我在工作培训期间拥有的一个网站，我们必须在该网站上实现一个具有添加任务功能的“待办事项”列表。原始站点涉及使用 HTML、CSS 和 jQuery，每当我通过左侧的复选框勾选任务时，它能够动画淡入和划掉文本。

这一次，我想保存我输入到我的 Django 开发服务器的所有任务，然后让它在保存数据后将数据发回给我。这也是我第一次学习如何在网站中进行后端开发。但是，我在使用 jQuery 创建动画中的隐藏和淡入淡出时遇到了问题。

你能帮我解决这两个问题吗？

我给你看一下代码(如果代码格式不正确，请原谅):

ToDoList.html:

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
        <title>Gregory Desrosiers (uWaterloo) - To Do List</title>
        <link rel="stylesheet" href="static/css/bootstrap.min.css">
        <link rel="stylesheet" href="static/css/stylesheet.css">
        <script src="static/javascript/jquery-1.11.3.min.js"></script>
        <script src="static/javascript/ToDoList.js"></script>
    </head>
    <body>
        <h1>To Do List</h1>
        <form action="" method="post">
            <div class="form-group">
                <label for="taskInputTextField">Enter a task:</label><br/>
                <input id="taskInputTextField" type="text" class="form-control" value="What task do you have?"><br/>
                <div id="#buttonBlock">
                    <button type="button" id="addTaskButton" class="btn btn-success">Add Task</button>
                    <button type="button" id="removeAllTasksButton" class="btn btn-danger">Delete All Tasks</button>
                </div>
            </div>
        </form>
        <div id="listOfThingsToDo">
            {% include "ListOfTasks.html" %}
        </div>
    </body>
    <footer>&copy; 2015 Gregory Desrosiers / University of Waterloo.</footer>
</html>

ListOfTasks.html:

{% for task in task_list %}
                <div class="checkbox-task"><label><input class="task" type="checkbox" {% if task.task_check_marked %} checked="checked" {% endif %}> {{ task.task_to_do }}</label></div>
{% endfor %}

样式表.css:

h1, footer, button {
    text-align: center;
}

body {
    padding: 0px 30% 0px 30%;
}

#listOfThingsToDo{
    overflow-x: auto;
}

.checkbox-task {
    border: 2px dotted blue;
    padding: 0px 3px 0px 3px;
    margin-top: 3px;
    margin-bottom: 3px;
}

#buttonBlock {
    display: block;
    text-align: center;
}

#removeAllTasksButton {
    float: right;
}

ToDoList.js:

$(function(){

    $("#addTaskButton").click(function(){
        var taskInput = $("#taskInputTextField").val();
        if (taskInput.length === 0)
        {
            alert("There is nothing entered in the Task input field. Please enter a task before clicking on the \"Add Task\" button.");
            return false;
        }

        $.post("process-request", {new_task: taskInput}, function(html){

            $("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo');
            $(".checkbox-task:last").hide();
            $(".checkbox-task:last").fadeIn(500);
        });
    });

    $("#removeAllTasksButton").click(function() {
        $.post("remove-all-tasks", null, function(html) {
            $("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo');
        });
    });

});

之前，我确实对属于“checkbox-task”类的最后一个元素有一个隐藏和淡入语句，但是当我点击“添加任务”按钮时它所做的只是隐藏它然后几乎再次出现瞬间，有点像闪烁。隐藏语句有效，但淡入语句无效。

我还尝试使用 while 语句来保持 jQuery 运行，并在添加新任务时通过对新任务的值进行比较来立即执行隐藏和淡入语句，但这导致了无限循环。

如果我删除这些语句，我得到的只是添加一个包含新任务的 div，这是网站的原始机制。但我还是想用动画来增强它。

views.py:

from django.shortcuts import render_to_response
from ToDoList.models import ToDoChecklistTask
from django.http import HttpResponse
from django.template import RequestContext
from django.views.decorators.csrf import csrf_exempt
from django.core import serializers

def getSiteTemplate(request):
    return render_to_response("ToDoList.html", {});

"""def hello(request):
    newObject = ToDoChecklistTask(task_to_do = "Hmm", task_check_marked = True)
    return HttpResponse("<p>" + newObject.__str__() + "</p>");"""

@csrf_exempt
def process_request(request):
    newTask = ToDoChecklistTask(task_to_do = request.POST["new_task"], task_check_marked = False)
    newTask.save();
    task_list = ToDoChecklistTask.objects.all()
    data_to_return = serializers.serialize('json', task_list);
    return HttpResponse(data_to_return, 'application/json')
    # return renderAddedTasks(request);

"""def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    template = loader.get_template('polls/index.html')
    context = RequestContext(request, {
        'latest_question_list': latest_question_list,
    })
    return HttpResponse(template.render(context))"""

def renderAddedTasks(request):
    task_list = ToDoChecklistTask.objects.all()
    return render_to_response("ToDoList.html",{'task_list': task_list}, context_instance = RequestContext(request));

@csrf_exempt
def remove_all_tasks(request):
    task_list = ToDoChecklistTask.objects.all()
    task_list.delete()
    data_to_return = serializers.serialize('json', task_list);
    return HttpResponse(data_to_return, 'application/json')
    # return render_to_response("ToDoList.html",{'task_list': task_list}, context_instance = RequestContext(request));

我确实有比这更多的代码，但在我编辑这个问题并添加我的其他 Django 文件中的代码之前，我想先看看从你的 Angular 来看这些信息是否足够。但是，我认为我真的没有必要发布它们，因为它们与我关于动画的问题或我是否正确处理请求并没有真正的关系。

下一次，我应该考虑接受一些人的培训，因为到目前为止，这方面的大部分培训仅来自于阅读这么多网站。

最佳答案

需要理解的是，load 是一个 Ajax 调用，是异步的。这意味着 Javascript 在发出请求时继续执行。为了在调用完成时执行某些操作，您将回调函数 作为参数传递给load。当 Ajax 完成加载时，jQuery 会自动调用该函数。

$("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo', function() {
        $(".checkbox-task:last").hide();
        $(".checkbox-task:last").fadeIn(500);
});

您可以看到 hide 和 fadeIn 调用在匿名函数内，因此它们只会在 Ajax 请求完成时执行。

关于jquery - Django:给 "task"div 添加动画，还有一些 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30466310/

25 4 0
文章推荐： javascript - 在 IE 中替代 CSS 混合模式？
文章推荐： python - 多个 python 包位置
文章推荐： Python time.sleep 语法错误
文章推荐： html - 我想将第一列设为静态并使其可排序？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com