【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案例演示 当我们对流式…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。 如果乘法先执行，结果是17。如果5…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...