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.hqwc.cn/news/84671.html

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

相关文章

算法通过村第8关【青铜】| 二叉树的经典算法题

二叉树的双指针 1.相同的树 思路&#xff1a;递归的挨个比较是否相同 class Solution {public boolean isSameTree(TreeNode p, TreeNode q) {if((p null&&q!null) || (p ! null && q null) || (p!null&&q!null&&p.val ! q.val)){return f…

面试之快速学习STL-迭代适配器

先放一张大图 参考&#xff1a;http://c.biancheng.net/view/7255.html 1. 反向迭代器 例子&#xff1a; std::list<int> values{1,2,3,4,5};auto start_it values.rbegin();const auto end_it values.rend();//start_it end_it std::reverse_iterator<std::lis…

SQL - 开窗(窗口)函数

什么是开窗函数&#xff1f; 开窗函数对一组值进行操作&#xff0c;它不像普通聚合函数那样需要使用GROUP BY子句对数据进行分组&#xff0c;能够在同一行中同时返回基础行的列和聚合列 开窗函数的语法形式为&#xff1a;函数 over(partition by <分组用列> order by …

用Python画出极坐标的基向量

文章目录 极坐标基向量的推导可视化 极坐标基向量的推导 极坐标其实很神奇&#xff0c;一方面&#xff0c;它描述的是平直时空&#xff0c;另一方面&#xff0c;任意两点间的坐标差为 d r , d θ \text dr, \text d\theta dr,dθ时&#xff0c;两点间的距离却是不固定的。极坐…

Leetcode刷题之1658. 将 x 减到 0 的最小操作数

题目: 算法分析: 可以看出,这道题本意是从计算两侧和为x 的数字, 要求数量最少, 那我们可以反向思考, 假如整个数组的和为sum, 那么我们就可以求中间部分和为sum-x的数字(当然必须连续), 当中间部分的数字同时达到和为sum-x以及长度最长两个要求时, 两侧数字也就达到了和为x以…

嵌入式设备应用开发(发现需求和提升价值)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 很多做技术的同学,都会陷入到技术的窠臼之中。对于如何做具体的产品、实现具体的技术,他们可能很感兴趣。但是做出来的东西做什么用,或者说是有没有竞争力,事实上他们不是很关心…

#systemverilog# 之 event region 和 timeslot 仿真调度(六)疑惑寄存器采样吗

一 象征性啰嗦 想必大家在刚开始尝试写Verilig HDL代码的时候,都是参考一些列参考代码,有些来自于参考书,有些来自于网上大牛的笔记,甚至有写来自于某宝FPGA开发板的授权代码。我还记得自己当时第一次写代码,参考的是一款Altera 芯片,结合Quartus 开发软件, 在上面练习…

CFC编程入门_【10分钟学会】

什么是CFC&#xff1a; 【差不多10分钟全学会】 CFC是图形化编程&#xff0c; 跟单片机的连线一样&#xff0c; 唯一的区别&#xff1a;功能块右侧是【只能输出】引脚。 只有左侧引脚可以输入输出。 有哪些控件&#xff1a; 指针&#xff1a;用于拖动功能块。 控制点&#xf…

opencv进阶14-Harris角点检测-cv2.cornerHarris

类似于人的眼睛和大脑&#xff0c;OpenCV可以检测图像的主要特征并将这 些特征提取到所谓的图像描述符中。然后&#xff0c;可以将这些特征作为数据 库&#xff0c;支持基于图像的搜索。此外&#xff0c;我们可以使用关键点将图像拼接起 来&#xff0c;组成更大的图像。&#x…

抖音web主页视频爬虫

需要抖音主页视频爬虫源码的发私信&#xff0c;小偿即可获得长期有效的采集程序。 比构造 s_v_web_id 验证滑块的方法更快&#xff0c;更稳定。

【HSPCIE仿真】输入网表文件(1)基本内容和基本规则

输入网表文件 1. 输入网表文件基本内容2. 输入网表文件示例3. 一些基本规则4. 数值表示5. 压缩文件格式的读取6. 参数和表达式 从HSPICE的仿真流程看&#xff0c;出去初始化配置过程&#xff0c;真正的仿真是从输入网表文件开始的。 HSPICE 根据输入网表文件&#xff08; inpu…

iconfont 图标在vue里的使用

刚好项目需要使用一个iconfont的图标&#xff0c;所以记录一下这个过程 1、iconfont-阿里巴巴矢量图标库 这个注册一个账号&#xff0c;以便后续使用下载代码时需要 2、寻找自己需要的图标 我主要是找两个图标 &#xff0c;一个加号&#xff0c;一个减号&#xff0c;分别加入到…