【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案例演示 当我们对流式…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...