智能建筑网站,宝塔配置wordpress,营销网站制作图片,建站如何注重内容建设问题描述#xff1a;
在优化页面时#xff0c;为了实现网页顶部遮挡效果#xff08;内容滚动#xff0c;顶部导航栏不随着一起滚动#xff0c;并且覆盖#xff09;#xff0c;做法是将内容都放在一个div里面#xff0c;为这个新的div设置样式#xff0c;margin-top w…问题描述
在优化页面时为了实现网页顶部遮挡效果内容滚动顶部导航栏不随着一起滚动并且覆盖做法是将内容都放在一个div里面为这个新的div设置样式margin-top width heigh等网页效果的确实现了但是出现的新的问题传参失败点击按钮跳转之后在页面是更新的数据并没有一起传过去。
分析:
可能是改变的了网页内容的div层级结构在JavaScript中按钮触发的事件是通过div一层一层来找到参数的位置导致了参数无法绑定。
复刻
在下面这一行代码中通过层级选择器找到目标div元素 类的名字进行传参。 setDivContent(div.div1 div.div2 div.my-div, 这是一个带参数的div示例);demo
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.my-div {background-color: #f2f2f2;padding: 10px;border: 1px solid #ccc;}/style
/head
body
div classdiv1div classdiv2div idmyDiv classmy-div/div/div
/divscriptfunction 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 classdiv1divdiv classdiv2div idmyDiv classmy-div/div/div/div
/div
网页效果 解释
通过这个demo证明了使用绝对路径的方式改变div层级结构可能会导致页面获取参数失败。
下面介绍另一种可能使用id选择器 #xxx 就不会出现这个问题
在改变div层级结构时传参不受影响
使用的 id 绑定数据
setDivContent(#myDiv, 这是一个带参数的div示例);
demo
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.my-div {background-color: #f2f2f2;padding: 10px;border: 1px solid #ccc;}/style
/head
body
div classdiv1div classdiv2div idmyDiv classmy-div/div/div
/div
scriptfunction 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 classdiv1divdiv classdiv2div idmyDiv classmy-div/div/div/div
/div
网页效果 解释
通过上面这个demo证明了使用id选择器进行绑定改变div层级结构后传参不受影响。
解决方案
在实际的项目中出现了这个问题
1、全局搜索div的类名或者id名找到JS文件找到绑定数据部分的代码。
2、看看是用哪种方式写的再来修改div路径。 工具推荐
