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

bug复刻，解决方案---在改变div层级关系时，导致传参失败

news 2025/7/10 9:38:43

问题描述：

在优化页面时，为了实现网页顶部遮挡效果（内容滚动，顶部导航栏不随着一起滚动，并且覆盖），做法是将内容都放在一个div里面，为这个新的div设置样式，margin-top width heigh等，网页效果的确实现了，但是出现的新的问题，传参失败，点击按钮跳转之后，在页面是更新的数据并没有一起传过去。

分析:

可能是改变的了网页内容的div层级结构，在JavaScript中按钮触发的事件，是通过div一层一层来找到参数的位置，导致了参数无法绑定。

复刻

在下面这一行代码中，通过层级选择器找到目标div元素 类的名字，进行传参。

    setDivContent("div.div1 > div.div2 > div.my-div", "这是一个带参数的div示例");

demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.my-div {background-color: #f2f2f2;padding: 10px;border: 1px solid #ccc;}</style>
</head>
<body>
<div class="div1"><div class="div2"><div id="myDiv" class="my-div"></div></div>
</div><script>function setDivContent(selector, content) {var div = document.querySelector(selector);if (div) {div.innerHTML = content;console.log("The div target element was successfully obtained")} else {console.error("Unable to find the target div element.");}}// 调用setDivContent方法，传递相对路径和参数作为div的内容setDivContent("div.div1 > div.div2 > div.my-div", "这是一个带参数的div示例");// 可以根据需要多次调用setDivContent方法，传递不同的相对路径和参数// setDivContent("#anotherDiv", "另一个参数");
</script>
</body>
</html>

网页效果

这时尝试改变div的结构，看看能不能拿到参数

在div1  div2之间在加一层div，层级选择器代码不动

<div class="div1"><div><div class="div2"><div id="myDiv" class="my-div"></div></div></div>
</div>

网页效果

解释

通过这个demo证明了，使用绝对路径的方式，改变div层级结构可能会导致页面获取参数失败。

下面介绍另一种可能：使用id选择器  #xxx  就不会出现这个问题

在改变div层级结构时，传参不受影响

使用的 id 绑定数据

setDivContent("#myDiv", "这是一个带参数的div示例");

demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.my-div {background-color: #f2f2f2;padding: 10px;border: 1px solid #ccc;}</style>
</head>
<body>
<div class="div1"><div class="div2"><div id="myDiv" class="my-div"></div></div>
</div>
<script>function setDivContent(selector, content) {var div = document.querySelector(selector);if (div) {div.innerHTML = content;console.log("The div target element was successfully obtained")} else {console.error("Unable to find the target div element.");}}// 调用setDivContent方法，传递相对路径和参数作为div的内容setDivContent("#myDiv", "这是一个带参数的div示例");// 可以根据需要多次调用setDivContent方法，传递不同的相对路径和参数// setDivContent("#anotherDiv", "另一个参数");
</script>
</body>
</html>

网页效果

这时改变div的结构，看看效果

在div1  div2之间在加一层div，层级选择器代码不动

<div class="div1"><div><div class="div2"><div id="myDiv" class="my-div"></div></div></div>
</div>

网页效果

解释

通过上面这个demo证明了，使用id选择器进行绑定，改变div层级结构后，传参不受影响。

解决方案

在实际的项目中，出现了这个问题

1、全局搜索，div的类名或者id名，找到JS文件，找到绑定数据部分的代码。

2、看看是用哪种方式写的，再来修改div路径。

工具推荐：

相关文章：

bug复刻，解决方案---在改变div层级关系时，导致传参失败

问题描述&#xff1a; 在优化页面时&#xff0c;为了实现网页顶部遮挡效果&#xff08;内容滚动&#xff0c;顶部导航栏不随着一起滚动&#xff0c;并且覆盖&#xff09;&#xff0c;做法是将内容都放在一个div里面&#xff0c;为这个新的div设置样式&#xff0c;margin-top w…...

编程日记 2023/8/27 9:36:35

2023年Java核心技术面试第九篇（篇篇万字精讲）

目录 十七 . 并发相关基础概念 17.1 线程安全 17.2 保证线程安全的两个方法 17.2.1 封装 17.2.2 不可变 17.2.2.1 final 和 immutable解释 17.3 线程安全的基本特性 17.3.1 原子性&#xff08;Atomicity&#xff09; 17.3.2 可见性&#xff08;Visibility&#xff09; 17.3.3 有…...

编程日记 2023/8/27 9:35:32

解码Python JSON：从基础到高级，掌握使用的精髓

摘要&#xff1a; JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;在Python中通过json模块可以方便地处理JSON数据。本文将从JSON的基础概念讲解开始&#xff0c;逐步深入介绍json模块的各种功能和用法&#xff0c;带您从入门到…...

编程日记 2023/8/27 9:34:31

Qt --- 自定义工具类 持续更新... ...

QSettings使用 .h文件 #ifndef UTIL_H #define UTIL_H#include <QSettings>class Util {public:// 配置文件读写 {{static bool writeInit(QString path, QString user_key, QString user_value);static bool readInit(QString path, QString user_key, QString &u…...

编程日记 2023/8/27 9:33:30

GO语言圣经 第二章习题

练习2.1 向tempconv包添加类型、常量和函数用来处理Kelvin绝对温度的转换&#xff0c;Kelvin 绝对零度是−273.15C&#xff0c;Kelvin绝对温度1K和摄氏度1C的单位间隔是一样的。 conv.go package tempconv// CToF converts a Celsius temperature to Fahrenheit. func CToF(c …...

编程日记 2023/8/27 9:32:27

Java 语言实现线性查找算法

【引言】 线性查找算法是一种简单且直观的查找算法。它从数组的第一个元素开始逐个比较&#xff0c;直到找到目标元素&#xff0c;或者遍历完整个数组。本文将使用Java语言实现线性查找算法&#xff0c;并详细讲解其思想和代码实现。 【算法思想】 线性查找的核心思想是逐个比…...

编程日记 2023/8/27 9:31:26

xcode15 change

jump to define 由原先的 control command left click 改为command left click 可以方便使用TODO // TODO: 是不是这里要改成红色字体 将这个直接作为bookmark...

编程日记 2023/8/27 9:30:25

MySQL集群（mysql-cluster）

环境 系统环境&#xff1a;centos7 管理节点&#xff1a;192.168.127.128 数据节点&#xff1a;192.168.127.145&#xff0c;192.168.127.146 sql节点&#xff1a;192.168.127.145&#xff0c;192.168.127.146 约定 创建mysql用户&#xff0c;将程序部署到/home/mysql 目…...

编程日记 2023/8/27 9:29:23

基于神经网络的3D地质模型

地球科学家需要对地质环境进行最佳估计才能进行模拟或评估。 除了地质背景之外&#xff0c;建立地质模型还需要一整套数学方法&#xff0c;如贝叶斯网络、协同克里金法、支持向量机、神经网络、随机模型&#xff0c;以在钻井日志或地球物理信息确实稀缺或不确定时定义哪些可能是…...

编程日记 2023/8/27 9:28:22

Spring AOP教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 AOP为Aspect Oriented Programming的缩写&#xff0c;意为&#xff1a;面向切面编程&#xff0c;通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续&#xff0c;是软件开发中的一个热点&#xff0c;也是Spring框架中的一个重要内容…...

编程日记 2023/8/27 9:27:22

1.linux的常用命令

目录 一、Linux入门 二、Linux文件系统目录 三、Linux的vi和vim的使用 四、Linux的关机、重启、注销 四、Linux的用户管理 五、Linux的运行级别 六、Linux的文件目录指令 七、Linux的时间日期指令 八、Linux的压缩和解压类指令 九、Linux的搜索查找指令 ​​​​​​…...

编程日记 2023/8/27 9:26:19

XiaoFeng.Net 网络库使用

网络库介绍 XiaoFeng.Net网络库包含了 SocketServer,SocketClient,WebSocketServer,WebSocketClient四个类库 SocketServer 网络服务端同时支持Socket客户端连接&#xff0c;WebSocket客户端&#xff0c;浏览器WebSocket连接 SocketCleint 网络客户端 WebSocketServer WebSock…...

编程日记 2023/8/27 9:25:17

【ES6】—数组的扩展

一、类数组/ 伪数组 1. 类/伪数组: 并不是真正意义的数组&#xff0c;有长度的属性&#xff0c;但无法使用Array原型上的方法 let divs document.getElementsByTagName(div) console.log(divs) // HTMLCollection []let divs2 document.getElementsByClassName("xxx&q…...

编程日记 2023/8/27 9:24:16

Android 实现资源国际化

前言 国际化指的是当Android系统切换语言时&#xff0c;相关设置也随之改变&#xff0c;从而使用不同的国家地区&#xff1b; 简而言之&#xff0c;就是我们的Android App中的文字和图片会随着不同国家的地区变化从而切换为不同语言文字和不同国家的图片 文字图片国际化 只要…...

编程日记 2023/8/27 9:23:15

uni、js——点击与禁用（不可点击）、动态样式class

案例 没约满的时间可以点击进行选择&#xff0c;约满的就不能选择了。选择完之后变色变字。 核心思想就是创建一个第三方变量存起来&#xff0c;点击谁就存到第三方&#xff0c;在根据这个进行判断。 代码 <template><view class"content"><view cl…...

编程日记 2023/8/27 9:22:13

分布式技术

分布式没有权威的技术&#xff0c;只有实践经验和积累的组件。常见的分布式技术有发号机制、分布式数据库、分布式数据库事物、基于Redis的分布式缓存、分布式会话、分布式安全认证。 1、发号机制 在数据库&#xff08;关系数据库&#xff09;中&#xff0c;主键往往是一条记…...

编程日记 2023/8/27 9:21:10

Consul的简介与安装

1、Consul简介 Consul是一套开源的分布式服务发现和配置管理系统&#xff0c;由HashiCorp公司用Go语言开发&#xff0c;Consul提供了微服务系统中的服务治理、配置中心、控制总线等功能。这些功能中的每一个都可以根据需要单独使用&#xff0c;也可以一起使用以构建全方位的服…...

编程日记 2023/8/27 9:20:09

微服务框架 go-zero logx 日志组件剖析

addTenant api 和 rpc 的实现 上一篇我们说到咱们还剩下 addTenant 功能还未实现&#xff0c;不知道有没有兄弟感兴趣去实验一波的&#xff0c;本篇文章进行简要补充 根据上一篇文章分析&#xff0c;其实我们只需要执行如下几步即可&#xff1a; 编写 tenant.api&#xff0c…...

编程日记 2023/8/27 9:19:08

基于Java+SpringBoot+Vue前后端分离图书电子商务网站设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

编程日记 2023/8/27 9:18:07

C# Winfrom通过COM接口访问和控制Excel应用程序，将Excel数据导入DataGridView

1.首先要创建xlsx文件 2.在Com中添加引用 3. 添加命名空间 using ApExcel Microsoft.Office.Interop.Excel; --这样起个名字方面后面写 4.样例 //点击操作excelDataTable dt new DataTable();string fileName "D:\desktop\tmp\test.xlsx";ApExcel.Application exA…...

编程日记 2023/8/27 9:17:05

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/9 5:23:25

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/7/9 7:35:20

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/7/7 11:11:25

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/7/9 9:17:29

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/7/8 17:54:23

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/7/10 6:26:33

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/7/9 9:42:23

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/6/15 22:59:29

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/9 9:20:33