【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>

测试效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/51222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十分钟速通 MySQL —— CRUD

表格的结构 在之前的课程中我们已经学习了关系型数据库的表格&#xff0c;我们再来回顾-下表格由哪些元素构成 表由表名、行、列、列名构成表名是表的名称列名表示列的名字&#xff0c;列名不可以重复表格实质上是一个二维数组&#xff0c;行和列都是从0开始数的(数组的特性) …

线程池配置与CPU利用率

线程数设置理论 CPU密集型&#xff1a;核心数 1I/O密集型&#xff1a;核心数 * 2 CPU利用率基础 单个CPU核心在单位时间内只能执行一个线程的指令。 实验验证 死循环测试&#xff1a;单线程可跑满一个核心利用率。多线程测试&#xff1a;增加线程数&#xff0c;核心利用率…

【软考】广义表

目录 1. 说明2. 基本操作3. 特点4. 存储结构5. 例题5.1 例题1 1. 说明 1.广义表是线性表的推广&#xff0c;是由0个或多个单元素或子表组成的有限序列。2.广义表与线性表的区别在于:线性表的元素都是结构上不可分的单元素&#xff0c;而广义表的元素既可以是单元素&#xff0c…

【过滤器 vs 拦截器】SpringBoot中过滤器与拦截器:明智选择的艺术(如何在项目中做出明智选择)

文章目录 SpringBoot 过滤器 vs 拦截器过滤器 (Filter)定义特点使用场景实现步骤创建过滤器类注册过滤器&#xff08;可选&#xff0c;如果不使用 WebFilter 注解&#xff09; 拦截器 (Interceptor)定义特点使用场景实现步骤创建拦截器类注册拦截器 过滤器与拦截器的比较实际项…

Python教程:一文了解Python中的序列化与反序列化

目录 1. 序列化与反序列化概述 1.1 什么是序列化&#xff1f; 1.2 什么是反序列化&#xff1f; 1.3 应用场景 2. Python中的序列化与反序列化模块 2.1 pickle模块 2.1.1 使用示例 2.2 json模块 2.2.1 使用示例 2.3 yaml模块 2.3.1 使用示例 2.4 marshal模块 3. 实…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第六十二章 定时器按键消抖实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

linux mysql 添加环境变量

要在Linux上添加MySQL的环境变量&#xff0c;可以按照以下步骤进行操作&#xff1a;打开终端窗口。使用文本编辑器&#xff08;如vi或nano&#xff09;打开~/.bashrc文件&#xff1a;vi ~/.bashrc或nano ~/.bashrc在文件的末尾添加以下内容&#xff1a;export PATH$PATH:/path/…

shardingsphere的学习(一):shardingsphere的基本概念和水平分表例子

简介 关于shardingsphere的基本相关概念的学习和使用shardingjdbc进行水平分表的例子 shardingsphere 是一套开源的分布式关系型数据库中间件解决方案&#xff0c;由sharding-jdbc&#xff0c;sharding-proxy&#xff0c;sharding-sidecar三个项目组成。 定位为关系型数据库…

日期类的实现(C++实现)

完整呈现 Date.h #include <iostream> using namespace std; //日期类 class Date { public:int GetMonthDays(int year, int month) const;//构造函数Date(int year 0, int month 1, int day 1);//拷贝构造Date(const Date& d);//打印void Print();//析构函数~…

Redis与MySQL数据一致性问题的策略模式及解决方案

目录 一、策略模式 1、旁路缓存模式&#xff08;Cache Aside Pattern&#xff09; 2、读写穿透&#xff08;Read-Through/Write-Through&#xff09; 3、异步缓存写入&#xff08;Write Behind&#xff09; 二、一致性解决方案 1、缓存延迟双删 2、删除重试机制 3、读取…

NodeJS:npm的使用

npm时nodejs的包安装工具 1.查看版本 $ npm -v 9.6.7 2.升级npm $ sudo npm install npm -g 3.安装nodejs模块 $ npm install <Module Name> 通过该方法将在当前目录下创建文件夹node_modules&#xff0c;并将模块安装到node_modules中 可以通过-g参数指定模块为全局安…

Zygote 进程你不知道的东西

一、概述 1.Zygote&#xff08;孵化&#xff09; 进程是所有 Android进程的父进程&#xff0c;包括SystemServer和各种应用进程都是通过Zygote进程fork出来的。Zygote进程相当于Android系统的根进程&#xff0c;系统启动后所有的进程都是通过这个进程fork出来的。这样做的好处…

【python】sklearn基础教程及示例

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

Python:模块导入

step1. 创建一个.py文件&#xff0c;里面装载你想导入的内容 step2. 用import导入 import导入的两种方法 1.整体 import file_name 2.局部 from file_name import function_name 整体的调用&#xff1a; file_name.function() 局部的&#xff1a; function_name() 这是导入的文…

Unity 资源 之 Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享

精彩呈现&#xff1a;Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享 一、Pop It 3D 解压玩具的魅力二、双人游戏的互动乐趣三、Unity 游戏资源包的优势四、如何获取资源包 亲爱的游戏爱好者们&#xff0c;今天为大家带来一款令人兴奋的游戏资源——Pop It 3D 解压玩具双人带…

Linux安装Python并运行一个项目

Linux安装Python并运行一个项目 1、下载Python Python版本&#xff1a;3.10.11 操作系统&#xff1a;Centos 8.2 下载地址&#xff1a;https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tar.xz 将文件放在&#xff1a;/opt/python 下 2、安装Python 先安装一些…

数字陷波器的设计和仿真(Matlab+C)

目录 一、数字陷波器的模型 二、Matlab仿真 1. 示例1 2. 示例2 三、C语言仿真 1. 由系统函数计算差分方程 2. 示例代码 一、数字陷波器的模型 二、Matlab仿真 1. 示例1 clear clc f0=100;%滤掉的100Hz fs=1000;%大于两倍的信号最高频率 r=0.9; w0=2*pi*f0/fs;%转换到…

[图解]《分析模式》漫谈19-Midjourney、Sora

1 00:00:02,360 --> 00:00:03,360 今天的漫谈 2 00:00:03,370 --> 00:00:04,560 我们来说一下 3 00:00:04,570 --> 00:00:08,720 人工智能&#xff0c;还是前言 4 00:00:08,890 --> 00:00:11,840 这里有一句话 Kent Beck 5 00:00:12,630 --> 00:00:13,750 W…

Spring Boot配置文件的语法规则

主要介绍两种配置文件的语法和格式&#xff0c;properties和yml 目录 1.配置文件的作用 2.创建配置文件 3.properties语法 4.yml语法 5.配置文件格式 1.配置文件的作用 对于配置文件&#xff0c;也有独立的文件夹去存放&#xff0c;主要用来存放一些需要经过变动的数据&a…

Vue学习(二)计算属性、监视属性、样式绑定

计算属性 定义&#xff1a;如果一个要用的数据&#xff0c;而是由已有的属性&#xff08;data中的属性&#xff09;计算得来&#xff0c;那么可以将其作为计算属性 原理&#xff1a;底层借助了Object.defineproperty方法提供的getter和setter。 计算属性都放在vue实例中的co…