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

问题描述:

在优化页面时,为了实现网页顶部遮挡效果(内容滚动,顶部导航栏不随着一起滚动,并且覆盖),做法是将内容都放在一个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路径。


工具推荐:

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

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

相关文章

c++ qt--事件过滤(第七部分)

c qt–事件过滤&#xff08;第七部分&#xff09; 一.为什么要用事件过滤 上一篇博客中我们用到了事件来进行一些更加细致的操作&#xff0c;如监控鼠标的按下与抬起&#xff0c;但是我们发现如果有很多的组件那每个组件都要创建一个类&#xff0c;这样就显得很麻烦&#xff…

GO语言:Worker Pools线程池、Select语句、Metex互斥锁详细示例教程

目录标题 一、Buffered Channels and Worker Pools1. Goroutine and Channel Example 线程和通道示例2. Deadlock 死锁3. Closing buffered channels 关闭通道4. Length vs Capacity 长度和容量5. WaitGroup6. Worker Pool Implementation 线程池 二、Select1. Example2. Defau…

IO进程线程,文件与目录,实现linux任意目录下ls -la

注意文件的名字、路径是如何输入的。 函数opendir打开目录&#xff0c;struct dirent&#xff0c;struct stat这些结构体的含义。 readdir()函数是一个用于读取目录内容的系统调用或库函数&#xff0c;在类Unix操作系统中&#xff08;如Linux&#xff09;广泛使用。它用于遍历…

python爬虫10:selenium库

python爬虫10&#xff1a;selenium库 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产…

leetcode算法题--复杂链表的复制

原题链接&#xff1a;https://leetcode.cn/problems/fu-za-lian-biao-de-fu-zhi-lcof/description/?envTypestudy-plan-v2&envIdcoding-interviews 感觉一开始想到的办法还是比较笨 /*** Definition for a Node.* type Node struct {* Val int* Next *Node* …

C语言练习题Day1

从今天开始分享C语言的练习题&#xff0c;每天都分享&#xff0c;差不多持续16天&#xff0c;看完对C语言的理解可能更进一步&#xff0c;让我们开始今天的分享吧&#xff01; 题目一 执行下面的代码&#xff0c;输出结果是&#xff08;&#xff09; int x5,y7; void swap()…

Qt --- 对象树机制、析构顺序导致崩溃

{QWidget widget;QPushButton buttonQuit("Quit",&widget); } 作为父组件的widget&#xff0c;子组件buttonQuit都是QObject的子类&#xff1b;上述代码运行没有问题。 代码析构时&#xff0c;因为C的要求&#xff0c;局部对象的析构时按照实例化顺序逆向的顺序…

「MySQL-01」MySQL基础

目录 一、数据库概念 1. 什么是数据库 2. 为什么要有数据库&#xff1f; 3. 数据库将数据存在哪里&#xff1f; 二、知名数据库介绍 1.知名数据库介绍 2.为什么要学习MySQL 三、MySQL的基本使用 0. 安装MySQL 1. 数据库客户端链接服务端 2. Windows下的MySQL服务端管理 3. 数据…

昌硕科技、世硕电子同步上线法大大电子合同

近日&#xff0c;世界500强企业和硕联合旗下上海昌硕科技有限公司&#xff08;以下简称“昌硕科技”&#xff09;、世硕电子&#xff08;昆山&#xff09;有限公司&#xff08;以下简称“世硕电子”&#xff09;的电子签项目正式上线。上线仪式在上海浦东和硕集团科研大楼举行&…

flowable源码解析之分析环境搭建

系列文章目录 第一章 源码分析环境搭建 第二章 流程引擎启动(一) 第三章 流程引擎启动(二) 第四章 流程引擎启动(三) 第五章 流程引擎启动(四) 第六章 流程部署 第七章 流程模型解析 第八章 流程的发起 第九章 数据存储机制 文章目录 系列文章目录一、Flowable源码分析…

使用fastjson2的@JSONField注解解决日期格式记录

最近在做一个三方对接&#xff0c;对方的日期格式数据要求时间日期格式: yyyyMMddHHmmss或者 yyyyMMdd&#xff0c;我一下想起了fastjson2工具包&#xff0c;所以很愉快的解决了此问题。 依赖jar如下&#xff1a; <dependency><groupId>com.alibaba.fastjson2</…

mysql 触发器格式,修改触发器,创建触发器,触发条件

1.查询所有触发器 show triggers; 2.创建触发器 #修改结束符 delimiter $$create trigger <自定义出发名> after insert on <所监听的表名> for each row begin#执行多条sql语句#拿到监听数据 关键字 new/old 即 新数据/旧数据update classify set cat_num cat…

每日一博 - 闲聊云原生和容器编排

文章目录 概念1. 云原生&#xff08;Cloud Native&#xff09;&#xff1a;2. 容器编排&#xff08;Container Orchestration&#xff09;&#xff1a; 小结 概念 云原生和容器编排是两个不同的概念&#xff0c;但它们之间有着密切的联系。下面将分别介绍这两个概念&#xff0…

day-02 套接字类型与协议设置、地址族和数据序列

一.套接字类型 1.面向连接的套接字&#xff08;SOCK_STREAM&#xff09; 特点&#xff1a; 传输过程中数据不会消失按顺序传输数据传输的数据不存在数据边界 2.面向消息的套接字&#xff08;SOC_DGRAM&#xff09; 特点&#xff1a; 强调快速传输而非传输顺序传输的数据可…

【C++】const成员 | 取地址运算符重载

Ⅰ. const成员 两种const 我们知道&#xff0c;用const修饰 能起到保护&#xff0c;使之不被修改的作用。 修饰指针的const有两种位置&#xff1a; 我们学过的this指针&#xff0c;就被后者所修饰&#xff0c;因此无法被修改。 const成员函数 ➡️为了保护函数里的成员&…

《Java极简设计模式》第05章:原型模式(Prototype)

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 源码地址&#xff1a;https://github.com/binghe001/java-simple-design-patterns/tree/master/j…

【日常积累】Linux下sftp搭建

概述 SFTP是Secure File Transfer Protocol的缩写&#xff0c;是安全文件传送协议。可以为传输文件提供一种安全的加密方法。跟ftp几乎语法功能一样。 SFTP是SSH的一部分&#xff0c;是一种传输档案至Blogger伺服器的安全方式。它本身没有单独的守护进程&#xff0c;必须使用s…

Elasticsearch 8.X reindex 源码剖析及提速指南

1、reindex 源码在线地址 为方便大家验证&#xff0c;这里给出 reindex github 源码地址。 https://github.com/elastic/elasticsearch/blob/001fcfb931454d760dbccff9f4d1b8d113f8708c/server/src/main/java/org/elasticsearch/index/reindex/ReindexRequest.java reindex 常见…

开源软件的崛起:历史与未来

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

Lambda函数

一.概念 1.利用lambda表达式可以编写内嵌的匿名函数&#xff0c;用以替换独立函数或者函数对象 2.每当你定义一个lambda表达式后&#xff0c;编译器会自动生成一个匿名类&#xff08;这个类当前重载了&#xff08;&#xff09;运算符&#xff09;&#xff0c;我们称为闭包类型…