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路径。


工具推荐:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

查漏补缺 - JS三 WebAPI

目录 BOMhistory DOM操作DOM1&#xff0c;dom.children 和 dom.childNodes 区别2&#xff0c;dom.remove()3&#xff0c;其他常用 API DOM 属性1&#xff0c;标准属性2&#xff0c;自定义属性 DOM 内容DOM样式DOM事件 JavaScript 包括 EcmaScript 和 WebAPI EcmaScript 包括 语…

25 Linux可视化-Webmin和bt运维工具

25 Linux可视化-Webmin和bt运维工具 文章目录 25 Linux可视化-Webmin和bt运维工具25.1 Web运行环境简介25.2 Webmin的安装及使用25.2.1 安装webmin25.2.2 Webmin使用演示 25.3 bt(宝塔)的安装及使用25.3.1 安装宝塔25.3.2 宝塔Web登录Linux服务器25.3.3 找回宝塔登录密码 学习视…

客路旅行(KLOOK)面试(部分)(未完全解析)

一面 用过Chatgpt的哪个版本&#xff0c;了解Chatgpt版本之间的差异吗 什么是优雅部署&#xff1f;newBing: 服务启动时&#xff0c;检查依赖的组件或容器是否就绪&#xff0c;如果不就绪&#xff0c;等待或重试&#xff0c;直到就绪后再注册到服务中心&#xff0c;对外提供服…

Java之API详解之BigDecimal类的详细解析

7 BigDecimal类 7.1 引入 首先我们来分析一下如下程序的执行结果&#xff1a; public class BigDecimalDemo01 {public static void main(String[] args) {System.out.println(0.09 0.01);}} 这段代码比较简单&#xff0c;就是计算0.09和0.01之和&#xff0c;并且将其结果…

Mapbox-gl 关闭所有Popup,以及关闭按钮出现黑色边框bug

1.官方示例 var popup new mapboxgl.Popup().addTo(map);popup.remove(); 很明显&#xff0c;需要记录popup对象&#xff0c;管理起来比较麻烦。 2.本人采用div的方式关闭所有的popup&#xff0c;在map对象上新增加方法 map.closePopupmapView.popupClear function(){$(&q…

ceph架构及 IO流程

CEPH是由多个节点构成的集群&#xff0c;它具有良好的可扩展性和可靠性。节点之间相互通信以达到&#xff1a; 存储和检索数据 数据复制 监控集群的健康状况 保证数据的完整性 检测故障并恢复 基本架构如下图&#xff1a; 分布式对象存储系统RADOS是CEPH最为关键的技术&a…

WebRTC音视频通话-WebRTC推拉流过程中日志log输出

WebRTC音视频通话-WebRTC推拉流过程中日志log输出 之前实现iOS端调用ossrs服务实现推拉流流程。 推流&#xff1a;https://blog.csdn.net/gloryFlow/article/details/132262724 拉流&#xff1a;https://blog.csdn.net/gloryFlow/article/details/132417602 在推拉流过程中的…

第 3 章 栈和队列(用递归函数求解迷宫问题(求出所有解))

1. 背景说明&#xff1a; 若迷宫 maze 中存在从入口 start 到出口 end 的通道&#xff0c;则求出所有合理解并求出最优解 迷宫示意图&#xff1a; 输入文本&#xff1a; 10 10181 3 1 7 2 3 2 7 3 5 3 6 4 2 4 3 4 4 5 4 6 2 6 6 7 2 7 3 7 4 7 6 7 7 8 11 18 8 2. 示例代码…

【计算机组成 课程笔记】3.1 算数运算和逻辑运算

课程链接&#xff1a; 计算机组成_北京大学_中国大学MOOC(慕课) 3 - 1 - 301-算术运算和逻辑运算&#xff08;13-7--&#xff09;_哔哩哔哩_bilibili 计算机的核心功能就是运算&#xff0c;运算的基本类型包括算数运算和逻辑运算。想要了解计算机是如何实现运算的&#xff0c;我…

Vlan和Trunk

文章目录 一、VLAN的定义与背景1. 传统以太网的问题&#xff08;广播域&#xff09;2. 用VLAN隔离广播域3. VLAN的优点与应用 二、VLAN的转发过程举例三、802.1Q标签&#xff1a;帧格式与作用四、VLAN工作原理交换机端口类型AccessTrunkHybrid PVID&#xff08;Port VLAN ID&am…

【基于空间纹理的残差网络无监督Pansharpening】

Unsupervised Pansharpening method Using Residual Network with Spatial Texture Attention &#xff08;基于空间纹理的残差网络无监督泛锐化方法&#xff09; 近年来&#xff0c;深度学习已经成为最受欢迎的泛锐化工具之一&#xff0c;许多相关方法已经被研究并反映出良好…

android 实现本地一键打包,告别繁琐的studio操作

前言 在实际开发项目中&#xff0c;我们的工程目录往往是多个app在一个工程下的&#xff0c;每次打包都需要手动的用studio点击Build->Generate Signed Bundle or APK->APK 选择app&#xff0c;签名等&#xff0c;甚至有的app签名还不一样&#xff0c;还需要手动的来回切…

【esp32】解决以太网+mqtt堆栈溢出问题 报错 no mem for receive buffer

本文主要记录了 esp32 + 以太网 +mqtt 功能时遇到的堆栈溢出的情况,千里之堤毁于蚁穴,开发过程的不细心导致多付出了一天多的时间,记录于此,共勉 📋 个人简介 💖 作者简介:大家好,我是喜欢记录零碎知识点的小菜鸟。😎📝 个人主页:欢迎访问我的 Ethernet_Comm 博…

小游戏分发平台如何以技术拓流?

2023年&#xff0c;小游戏的发展将受到多方面的影响&#xff0c;例如新技术的引入、参与小游戏的新玩家以及游戏市场的激烈竞争等。首先&#xff0c;新技术如虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;和机器人技术都可以带来新颖的游戏体验。其…

【Qt学习】10 利用QSharedMemory实现单例运行

问题 让应用程序只有一个运行实例 QSharedMemory除了可以完成进程间通信&#xff0c;还可以实现应用程序单例化。 解法 首先&#xff0c;看看QSharedMemory的几个函数&#xff1a; 1、QSharedMemory(const QString &key, QObject *parent Q_NULLPTR)构造函数 该构造函数…

大模型综述论文笔记6-15

这里写自定义目录标题 KeywordsBackgroud for LLMsTechnical Evolution of GPT-series ModelsResearch of OpenAI on LLMs can be roughly divided into the following stagesEarly ExplorationsCapacity LeapCapacity EnhancementThe Milestones of Language Models Resources…

OPENCV实现计算描述子

1、计算描述子 kp,des = sift.computer(img,kp) 2、其作用是进行特征匹配 3、同时计算关键点和描述 3.1、kp,des = sift.detectAnd Computer(img,...)

Mysql表关联简单介绍(inner join、left join、right join、full join不支持、笛卡尔积)

文章目录 0. 交集、并集、差集含义说明1. 简单演示上图七种情况0. A、B表数据准备1. left outer join 简称 left join 左表所有数据&#xff0c;右表关联数据&#xff0c;没有的以null填充2. right outer join 简称 right join&#xff0c;右表所有数据&#xff0c;左表关联数据…

接口测试json入参,不同类型参数格式书写

接口json入参&#xff0c;不同类型参数格式 1、String 入参&#xff1a;A&#xff08;String&#xff09;&#xff0c;B&#xff08;String&#xff09; 格式&#xff1a;{"A":"值a","B":"值b"} 示例&#xff1a; 接口测试入参这么…

UE 5 实现骨骼物理模拟 乳摇

打开角色的物理资产&#xff0c;如果是下载的或者官方的模型&#xff0c;都会内带物理资产 模拟 可以根据分块模拟当前物体的物理效果 点击右上角的模拟&#xff0c;可以模拟布娃娃系统 Ctrl鼠标右键可以实现对布娃娃施加力的效果。 模拟选中项 模拟选中项可以只模拟一部…