【Django】 js实现动态赋值、显示show隐藏hide效果

news2024/12/27 9:49:52

文章目录

需要达到的前端效果预览：
实现步骤
- 复制bootstrp代码（buttons）
- 复制bootstrp代码（Alert警告框）
- 写js
- 测试效果

需要达到的前端效果预览：

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet"
            href="{% static "antapp/bootstrap/bootstrap.min.css" %}">
        <title>Document</title>
    </head>
    <body>
        <div class="row" style="margin-top: 20px;margin-left: 40px;">
            <button type="button" id="chinese" class="btn btn-primary" style="margin-left: 5px;">语文</button>
            <button type="button" id="math" class="btn btn-warning" style="margin-left: 5px;">数学</button>
            <button type="button" id="english" class="btn btn-success" style="margin-left: 5px;">英语</button>
            <button type="button" id="show" class="btn btn-danger" style="margin-left: 5px;">显示</button>
            <button type="button" id="hide" class="btn btn-secondary" style="margin-left: 5px;">隐藏</button>

        </div>
        <div class="row"  style="margin-top: 20px; margin-left: 40px;">
            <div id="showtxt" class="alert alert-primary" role="alert"> A simple primary alert—check it out!
            </div>
        </div>
        <script src="{% static "antapp/bootstrap/jquery.min.js" %}"></script>
        <script src="{% static "antapp/bootstrap/bootstrap.bundle.min.js" %}"></script>
        <script>
            var btconfig={
                "chinese":"语文成绩100",
                "math":"数学成绩99",
                "english":"英语成绩98",
            }
            $(function(){
                $("#chinese").click(function(){
                    alert(btconfig["chinese"])
                    $("#showtxt").html(btconfig["chinese"])
                })
                $("#math").click(function(){
                    $("#showtxt").html(btconfig["math"])
                })
                $("#english").click(function(){
                    $("#showtxt").html(btconfig["english"])
                })
                $("#show").click(function(){
                    $("#showtxt").show()
                })
                $("#hide").click(function(){
                    $("#showtxt").hide()
                })

            })
        </script>
    </body>
</html>

在这里插入图片描述

实现步骤

复制bootstrp代码（buttons）

<button type="button" id="chinese" class="btn btn-primary" style="margin-left: 5px;">语文</button>
<button type="button" id="math" class="btn btn-warning" style="margin-left: 5px;">数学</button>
<button type="button" id="english" class="btn btn-success" style="margin-left: 5px;">英语</button>
<button type="button" id="show" class="btn btn-danger" style="margin-left: 5px;">显示</button>
<button type="button" id="hide" class="btn btn-secondary" style="margin-left: 5px;">隐藏</button>

在这里插入图片描述
上图使用的工具链接如下：
https://blog.csdn.net/xzzteach/article/details/140732891

复制bootstrp代码（Alert警告框）

https://v4.bootcss.com/docs/components/alerts/

<div id="showtxt" class="alert alert-primary" role="alert"> A simple primary alert—check it out!</div>

在这里插入图片描述

写js

        <script>
            var btconfig={
                "chinese":"语文成绩100",
                "math":"数学成绩99",
                "english":"英语成绩98",
            }
            $(function(){
                $("#chinese").click(function(){
                    alert(btconfig["chinese"])
                    $("#showtxt").html(btconfig["chinese"])
                })
                $("#math").click(function(){
                    $("#showtxt").html(btconfig["math"])
                })
                $("#english").click(function(){
                    $("#showtxt").html(btconfig["english"])
                })
                $("#show").click(function(){
                    $("#showtxt").show()
                })
                $("#hide").click(function(){
                    $("#showtxt").hide()
                })

            })
        </script>