【Django】 js实现动态赋值、显示show隐藏hide效果
文章目录
- 需要达到的前端效果预览：
- 实现步骤
- 复制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>
测试效果
相关文章：
【Django】 js实现动态赋值、显示show隐藏hide效果
文章目录 需要达到的前端效果预览：实现步骤复制bootstrp代码（buttons）复制bootstrp代码（Alert警告框）写js测试效果 需要达到的前端效果预览： {% load static %} <!DOCTYPE html> <html lang"…...
qt--做一个拷贝文件器
一、项目要求 使用线程完善文件拷贝器的操作 主窗口不能假死主窗口进度条必须能动改写文件大小的单位（自适应） 1TB1024GB 1GB1024MB 1MB1024KB 1KB1024字节 二、所需技术 1.QFileDialog 文件对话框 QFileDialog也继承了QDialog类，直接使用静态…...
Eclipse 搭建 C/C++ 开发环境以及eclipse的使用
一、下载、安装 MinGW 1、下载: 下载地址：MinGW - Minimalist GNU for Windows - Browse Files at SourceForge.net 点击“Download Latest Version”即可 下载完成后，得到一个名为 mingw-get-setup.exe 的安装文件。双击运行，安装即可。 …...
【初阶数据结构】复杂度算法题篇
旋转数组 力扣原题 方案一 循环K次将数组所有元素向后移动⼀位（代码不通过) 时间复杂度O(n2) 空间复杂度O(1) void rotate(int* nums, int numsSize, int k) {while (k--) {int end nums[numsSize - 1];for (int i numsSize - 1; i > 0; i--) {nums[i] num…...
20240725项目的maven环境报红-重新配置maven
1.在编辑器里面打开项目，导入源码 （1）找到项目的地址C:\Users\zzz\IdeaProjects\datasys，然后右击用idea编辑器打开。 （2）idea中上菜单栏打开open，然后输入file，选择源代码文件 2.…...
若依 ruoyi poi Excel合并行的导入
本文仅针对文字相关的合并做了处理 ，图片合并及保存需要另做处理！！ 目标：Excel合并行内容的导入 结果： 1. ExcelUtil.java 类，新增方法：判断是否是合并行 /*** 新增 合并行相关代码：…...
优化算法：1.遗传算法(GA)及Python实现
一、定义 遗传算法就像是在模拟“优胜劣汰”的进化过程，通过选择最优秀的个体，交配产生下一代，并引入一定的变异，逐步优化解决问题。 二、具体步骤 初始化种群(Initialization)： 假设你要找到一个迷宫的最佳出口路径。…...
企业化运维(8)Docker容器技术
###1.Docker介绍### 什么是Docker Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间…...
Unity C#底层原理（二）
委托 方法的容器：委托可以存储一个或多个方法的引用。可以使用委托对象来调用这些方法。函数/方法的变量类型：委托类型可以像变量一样声明和使用，存储方法的引用。存储、传递方法：委托可以作为参数传递给方法，也可以作…...
计算机网络-配置路由器ACL（访问控制列表）
配置访问控制列表ACL 拓扑结构 拓扑结构如下： 要配置一个ACL，禁止PC0访问PC3，禁止PC4访问PC0，其它正常。 配置Router0 配置接口IP地址： interface fastethernet 0/0 ip address 192.168.1.1 255.255.255.0 no shu…...
51单片机嵌入式开发：20、STC89C52R基于C51嵌入式点阵广告屏的设计
STC89C52R基于C51嵌入式点阵广告屏的设计 1 概述2 LED点阵介绍2.1 特点和优势2.2 工作原理：2.3 使用方法： 3 LED点阵原理3.1 Led点阵内部电路3.2 原理图电路3.3 74HC595 4 软件实现点阵图案的滑动4.1 软件工程代码4.2 Protues仿真 5 总结 配套示例程序 1…...
VLC输出NDI媒体流
目录 1. 下载安装VLC Play 2. 首先在电脑上安装NDI Tools 3. 运行VLC进行输出配置 4. 播放视频 5. 验证 （1）用Studio Monitor验证 （2）用OBS验证 NDI（Network Device Interface）即网络设备接口，是由美国 NewTek 公司开发的免费标准，它可使兼容的视频产品以高质量…...
WiFi 局域网通信 - 发现服务和解析
1. nsdManager nsdManager requireContext().getSystemService(Context.NSD_SERVICE) as NsdManager2. NsdManager.DiscoveryListener 注意：在onStartDiscoveryFailed 和 onStopDiscoveryFailed里不要调用nsdManager.stopServiceDiscovery(this) 方法࿰…...
ChatGPT建议前端学习计划
HTML&CSS基础 - 学习HTML标签、CSS属性、页面布局等基础知识 JavaScript基础 - 学习变量、数据类型、控制流、函数等基础知识 jQuery - 学习如何使用jQuery处理文档对象模型（DOM）、事件、动画等 Ajax - 全称为 Asynchronous JavaScript and XML&…...
YOLO5项目目录最强解析
YOLO5项目目录解析 YOLOv5 项目目录下的文件和目录的结构，以下是对每个目录和文件的解释： 目录 📁 .github: 存放 GitHub 相关配置和文件，如 GitHub Actions 工作流文件、Issue 模板等，用于自动化构建和持续集成等功…...
【python】sklearn基础教程及示例
【python】sklearn基础教程及示例 Scikit-learn（简称sklearn）是一个非常流行的Python机器学习库，提供了许多常用的机器学习算法和工具。以下是一个基础教程的概述： 1. 安装scikit-learn 首先，确保你已经安装了Python和…...
Linux：传输层(2) -- TCP协议(2)
目录 1. 流量控制 2. 滑动窗口 3. 拥塞控制 4. 延迟应答 5. 捎带应答 6. 面向字节流 7. 粘包问题 8. TCP异常情况 1. 流量控制 接收端处理数据的速度是有限的. 如果发送端发的太快 , 导致接收端的缓冲区被打满 , 这个时候如果发送端继续发送 , 就会造成丢包, 继而引…...
AcWing 802. 区间和
var说明add存储了插入操作，在指定 x x x下标所在位置 a [ x ] c a[x]c a[x]cquery是求 [ L , R ] [L,R] [L,R]区间和用到的数组,最后才用到alls 是存储离散化之后的值 , 对于会访问到的每个下标，统统丢到 a l l s 里面 ，会把 x 和 [ L , R …...
实验2-2-1 温度转换
#include<stdio.h> #include <math.h> int main(){int c,f150;c5*(f-32)/9;printf("fahr 150, celsius %d",c); }...
Spark实时（六）：Output Sinks案例演示
文章目录 Output Sinks案例演示 一、File sink 二、Memory Sink 三、Foreach Sink 1、foreachBatch 2、foreach Output Sinks案例演示 当我们对流式…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...
人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent
安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集 描…...
在 Spring Boot 中使用 JSP
jsp？ 好多年没用了。重新整一下 还费了点时间，记录一下。 项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用
Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础，但这一子系统结构复杂，常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题，需要一套工具化、…...
【汇编逆向系列】六、函数调用包含多个参数之多个整型-参数压栈顺序，rcx,rdx,r8,r9寄存器
从本章节开始，进入到函数有多个参数的情况，前面几个章节中介绍了整型和浮点型使用了不同的寄存器在进行函数传参，ECX是整型的第一个参数的寄存器，那么多个参数的情况下函数如何传参，下面展开介绍参数为整型时候的几种情…...