当前位置： 首页 > news >正文

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

news 2026/5/13 1:51:37

文章目录

  • 需要达到的前端效果预览：
  • 实现步骤
    • 复制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效果

文章目录 需要达到的前端效果预览&#xff1a;实现步骤复制bootstrp代码&#xff08;buttons&#xff09;复制bootstrp代码&#xff08;Alert警告框&#xff09;写js测试效果 需要达到的前端效果预览&#xff1a; {% load static %} <!DOCTYPE html> <html lang"…...

编程日记 2024/7/28 19:44:48

qt--做一个拷贝文件器

一、项目要求 使用线程完善文件拷贝器的操作 主窗口不能假死主窗口进度条必须能动改写文件大小的单位&#xff08;自适应&#xff09; 1TB1024GB 1GB1024MB 1MB1024KB 1KB1024字节 二、所需技术 1.QFileDialog 文件对话框 QFileDialog也继承了QDialog类&#xff0c;直接使用静态…...

编程日记 2024/7/28 19:43:47

Eclipse 搭建 C/C++ 开发环境以及eclipse的使用

一、下载、安装 MinGW 1、下载: 下载地址&#xff1a;MinGW - Minimalist GNU for Windows - Browse Files at SourceForge.net 点击“Download Latest Version”即可 下载完成后&#xff0c;得到一个名为 mingw-get-setup.exe 的安装文件。双击运行&#xff0c;安装即可。 …...

编程日记 2024/7/28 19:40:43

【初阶数据结构】复杂度算法题篇

旋转数组 力扣原题 方案一 循环K次将数组所有元素向后移动⼀位&#xff08;代码不通过) 时间复杂度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…...

编程日记 2024/7/28 19:39:42

20240725项目的maven环境报红-重新配置maven

1.在编辑器里面打开项目&#xff0c;导入源码 &#xff08;1&#xff09;找到项目的地址C:\Users\zzz\IdeaProjects\datasys&#xff0c;然后右击用idea编辑器打开。 &#xff08;2&#xff09;idea中上菜单栏打开open&#xff0c;然后输入file&#xff0c;选择源代码文件 2.…...

编程日记 2024/7/28 19:38:42

若依 ruoyi poi Excel合并行的导入

本文仅针对文字相关的合并做了处理 &#xff0c;图片合并及保存需要另做处理&#xff01;&#xff01; 目标&#xff1a;Excel合并行内容的导入 结果&#xff1a; 1. ExcelUtil.java 类&#xff0c;新增方法&#xff1a;判断是否是合并行 /*** 新增 合并行相关代码&#xff1a;…...

编程日记 2024/7/28 19:33:36

优化算法：1.遗传算法(GA)及Python实现

一、定义 遗传算法就像是在模拟“优胜劣汰”的进化过程&#xff0c;通过选择最优秀的个体&#xff0c;交配产生下一代&#xff0c;并引入一定的变异&#xff0c;逐步优化解决问题。 二、具体步骤 初始化种群(Initialization)&#xff1a; 假设你要找到一个迷宫的最佳出口路径。…...

编程日记 2024/7/28 19:31:34

企业化运维(8)Docker容器技术

###1.Docker介绍### 什么是Docker Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows 机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间…...

编程日记 2024/7/28 19:28:31

Unity C#底层原理（二）

委托 方法的容器&#xff1a;委托可以存储一个或多个方法的引用。可以使用委托对象来调用这些方法。函数/方法的变量类型&#xff1a;委托类型可以像变量一样声明和使用&#xff0c;存储方法的引用。存储、传递方法&#xff1a;委托可以作为参数传递给方法&#xff0c;也可以作…...

编程日记 2024/7/28 19:26:28

计算机网络-配置路由器ACL（访问控制列表）

配置访问控制列表ACL 拓扑结构 拓扑结构如下&#xff1a; 要配置一个ACL&#xff0c;禁止PC0访问PC3&#xff0c;禁止PC4访问PC0&#xff0c;其它正常。 配置Router0 配置接口IP地址&#xff1a; interface fastethernet 0/0 ip address 192.168.1.1 255.255.255.0 no shu…...

编程日记 2024/7/28 19:25:27

51单片机嵌入式开发：20、STC89C52R基于C51嵌入式点阵广告屏的设计

STC89C52R基于C51嵌入式点阵广告屏的设计 1 概述2 LED点阵介绍2.1 特点和优势2.2 工作原理&#xff1a;2.3 使用方法&#xff1a; 3 LED点阵原理3.1 Led点阵内部电路3.2 原理图电路3.3 74HC595 4 软件实现点阵图案的滑动4.1 软件工程代码4.2 Protues仿真 5 总结 配套示例程序 1…...

编程日记 2024/7/28 19:24:26

VLC输出NDI媒体流

目录 1. 下载安装VLC Play 2. 首先在电脑上安装NDI Tools 3. 运行VLC进行输出配置 4. 播放视频 5. 验证 （1）用Studio Monitor验证 （2）用OBS验证 NDI（Network Device Interface）即网络设备接口，是由美国 NewTek 公司开发的免费标准，它可使兼容的视频产品以高质量…...

编程日记 2024/7/28 19:19:19

WiFi 局域网通信 - 发现服务和解析

1. nsdManager nsdManager requireContext().getSystemService(Context.NSD_SERVICE) as NsdManager2. NsdManager.DiscoveryListener 注意&#xff1a;在onStartDiscoveryFailed 和 onStopDiscoveryFailed里不要调用nsdManager.stopServiceDiscovery(this) 方法&#xff0…...

编程日记 2024/7/28 19:18:18

ChatGPT建议前端学习计划

HTML&CSS基础 - 学习HTML标签、CSS属性、页面布局等基础知识 JavaScript基础 - 学习变量、数据类型、控制流、函数等基础知识 jQuery - 学习如何使用jQuery处理文档对象模型&#xff08;DOM&#xff09;、事件、动画等 Ajax - 全称为 Asynchronous JavaScript and XML&…...

编程日记 2024/7/28 19:15:14

YOLO5项目目录最强解析

YOLO5项目目录解析 YOLOv5 项目目录下的文件和目录的结构&#xff0c;以下是对每个目录和文件的解释&#xff1a; 目录 &#x1f4c1; .github: 存放 GitHub 相关配置和文件&#xff0c;如 GitHub Actions 工作流文件、Issue 模板等&#xff0c;用于自动化构建和持续集成等功…...

编程日记 2024/7/28 19:14:13

【python】sklearn基础教程及示例

【python】sklearn基础教程及示例 Scikit-learn&#xff08;简称sklearn&#xff09;是一个非常流行的Python机器学习库&#xff0c;提供了许多常用的机器学习算法和工具。以下是一个基础教程的概述&#xff1a; 1. 安装scikit-learn 首先&#xff0c;确保你已经安装了Python和…...

编程日记 2024/7/28 19:11:10

Linux：传输层(2) -- TCP协议(2)

目录 1. 流量控制 2. 滑动窗口 3. 拥塞控制 4. 延迟应答 5. 捎带应答 6. 面向字节流 7. 粘包问题 8. TCP异常情况 1. 流量控制 接收端处理数据的速度是有限的. 如果发送端发的太快 , 导致接收端的缓冲区被打满 , 这个时候如果发送端继续发送 , 就会造成丢包, 继而引…...

编程日记 2024/7/28 19:10:09

AcWing 802. 区间和

var说明add存储了插入操作&#xff0c;在指定 x x x下标所在位置 a [ x ] c a[x]c a[x]cquery是求 [ L , R ] [L,R] [L,R]区间和用到的数组,最后才用到alls 是存储离散化之后的值 , 对于会访问到的每个下标&#xff0c;统统丢到 a l l s 里面 &#xff0c;会把 x 和 [ L , R …...

编程日记 2024/7/28 19:09:07

实验2-2-1 温度转换

#include<stdio.h> #include <math.h> int main(){int c,f150;c5*(f-32)/9;printf("fahr 150, celsius %d",c); }...

编程日记 2024/7/28 19:07:05

Spark实时（六）：Output Sinks案例演示

文章目录 Output Sinks案例演示 一、​​​​​​​File sink 二、​​​​​​​​​​​​​​Memory Sink 三、​​​​​​​​​​​​​​Foreach Sink 1、​​​​​​​foreachBatch 2、​​​​​​​​​​​​​​foreach Output Sinks案例演示 当我们对流式…...

编程日记 2024/7/28 19:06:04

Resolink MCP：基于MCP协议与Playwright的AI浏览器自动化实践

1. 项目概述&#xff1a;当AI助手学会“动手”——Resolink MCP的浏览器自动化革命如果你和我一样&#xff0c;每天在Cursor、Claude这类AI编程助手的陪伴下写代码&#xff0c;那你一定遇到过这样的场景&#xff1a;你正和AI热烈讨论一个技术方案&#xff0c;突然需要去浏览器里…...

编程新知 2026/5/13 1:01:09

Photoshop AVIF插件实战：解锁下一代图像格式的完整解决方案

Photoshop AVIF插件实战&#xff1a;解锁下一代图像格式的完整解决方案 【免费下载链接】avif-format An AV1 Image (AVIF) file format plug-in for Adobe Photoshop 项目地址: https://gitcode.com/gh_mirrors/avi/avif-format 为Adobe Photoshop添加AVIF格式支持不再…...

编程新知 2026/5/13 0:57:05

手把手教你ClickHouse（二、Windows下Docker部署与可视化实战）

1. Windows下Docker环境准备 在开始部署ClickHouse之前&#xff0c;我们需要先确保Windows系统已经正确配置Docker环境。这里我推荐使用Docker Desktop for Windows&#xff0c;它提供了图形化界面和完整的容器管理功能。安装过程可能会遇到几个常见坑点&#xff0c;我把自己实…...

编程新知 2026/5/12 23:29:42

BMS工程师必看：实测案例解析50-108MHz频段超标如何整改（滤波/接地/屏蔽实战）

BMS工程师实战指南&#xff1a;50-108MHz频段EMC超标问题深度解析与整改方案 当你在实验室看到传导骚扰测试曲线在50-108MHz频段持续突破GB/T18655-2010三级限值时&#xff0c;那种焦虑感每个BMS工程师都深有体会。这不是简单的测试失败&#xff0c;而是产品设计中隐藏的高频噪…...

编程新知 2026/5/12 20:32:57

VMware Workstation Pro 17免费激活实战：5分钟解锁专业虚拟化

VMware Workstation Pro 17免费激活实战&#xff1a;5分钟解锁专业虚拟化 【免费下载链接】VMware-Workstation-Pro-17-Licence-Keys Free VMware Workstation Pro 17 full license keys. Weve meticulously organized thousands of keys, catering to all major versions of V…...

编程新知 2026/5/12 18:20:09

[具身智能-653]：人的大脑神经网络就是天然的模拟电路，还是数字电路？

结论先给&#xff1a;人脑神经网络&#xff0c;本质是【天然模拟电路】&#xff0c;不是数字电路这和前面聊的模拟电路频域特性、硬件隐式频域滤波完全同逻辑。一、先分清&#xff1a;数字电路 vs 模拟电路 核心区别数字电路只有0、1两种离散电平&#xff0c;跳变是阶跃式&…...

编程新知 2026/5/12 17:39:13

AI专著生成神器登场！快速输出20万字专著，写作不用愁！

学术专著写作困境与AI工具的崛起 对于许多学术研究者来说&#xff0c;撰写学术专著时面临的最大挑战&#xff0c;无疑是“有限的精力”和“无穷的需求”之间的矛盾。撰写专著通常需要三到五年&#xff0c;甚至更长时间&#xff0c;而研究者还需平衡教学、科研项目和学术交流等…...

编程新知 2026/5/12 17:03:50

太秀了，我把自己蒸馏成了 Skill！已开源

最近 GitHub 上掀起了一股「AI 蒸馏」热潮&#xff0c;这里的蒸馏可不是酿酒&#xff0c;而是把身边的人封装成 AI 技能包——同事.skill、老板.skill、搭档.skill 等各类蒸馏项目层出不穷&#xff0c;大家都在把身边人的工作经验、说话风格、做事逻辑&#xff0c;做成可直接使…...

编程新知 2026/5/12 16:36:22

Loop Habit Tracker习惯追踪应用技术深度解析与架构实践指南

Loop Habit Tracker习惯追踪应用技术深度解析与架构实践指南 【免费下载链接】uhabits Loop Habit Tracker, a mobile app for creating and maintaining long-term positive habits 项目地址: https://gitcode.com/gh_mirrors/uh/uhabits Loop Habit Tracker是一款基于…...

编程新知 2026/5/12 16:24:05

基于Ollama与OpenClaw框架，在Ubuntu VPS上部署私有AI助手

1. 项目概述与核心价值最近在折腾一个挺有意思的东西&#xff0c;叫OpenClaw。简单来说&#xff0c;它是一个开源的AI智能体&#xff08;Agent&#xff09;框架&#xff0c;能让你自己部署一个功能丰富的AI助手。这玩意儿最吸引我的地方在于&#xff0c;它能和本地的Ollama大语…...

编程新知 2026/5/12 15:45:52