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

2023-11-16

问题描述：

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

工具推荐：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Bug

前端

javascript