【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案例演示 当我们对流式…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？
在工业自动化持续演进的今天，通信网络的角色正变得愈发关键。 2025年6月6日，为期三天的华南国际工业博览会在深圳国际会展中心（宝安）圆满落幕。作为国内工业通信领域的技术型企业，光路科技（Fiberroad&…...