問題描述：
在優(yōu)化頁面時，為了實現(xiàn)網(wǎng)頁頂部遮擋效果（內(nèi)容滾動，頂部導(dǎo)航欄不隨著一起滾動，并且覆蓋），做法是將內(nèi)容都放在一個div里面，為這個新的div設(shè)置樣式，margin-top width heigh等，網(wǎng)頁效果的確實現(xiàn)了，但是出現(xiàn)的新的問題，傳參失敗，點擊按鈕跳轉(zhuǎn)之后，在頁面是更新的數(shù)據(jù)并沒有一起傳過去。
分析:
可能是改變的了網(wǎng)頁內(nèi)容的div層級結(jié)構(gòu)，在JavaScript中按鈕觸發(fā)的事件，是通過div一層一層來找到參數(shù)的位置，導(dǎo)致了參數(shù)無法綁定。
復(fù)刻
在下面這一行代碼中，通過層級選擇器找到目標(biāo)div元素 類的名字，進行傳參。
setDivContent("div.div1 > div.div2 > div.my-div", "這是一個帶參數(shù)的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.");
}
}
// 調(diào)用setDivContent方法，傳遞相對路徑和參數(shù)作為div的內(nèi)容
setDivContent("div.div1 > div.div2 > div.my-div", "這是一個帶參數(shù)的div示例");
// 可以根據(jù)需要多次調(diào)用setDivContent方法，傳遞不同的相對路徑和參數(shù)
// setDivContent("#anotherDiv", "另一個參數(shù)");
</script>
</body>
</html>
網(wǎng)頁效果
這時嘗試改變div的結(jié)構(gòu)，看看能不能拿到參數(shù)
在div1? div2之間在加一層div，層級選擇器代碼不動
<div class="div1">
<div>
<div class="div2">
<div id="myDiv" class="my-div"></div>
</div>
</div>
</div>網(wǎng)頁效果
解釋
通過這個demo證明了，使用絕對路徑的方式，改變div層級結(jié)構(gòu)可能會導(dǎo)致頁面獲取參數(shù)失敗。
下面介紹另一種可能：使用id選擇器? #xxx? 就不會出現(xiàn)這個問題
在改變div層級結(jié)構(gòu)時，傳參不受影響
使用的 id 綁定數(shù)據(jù)
setDivContent("#myDiv", "這是一個帶參數(shù)的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.");
}
}
// 調(diào)用setDivContent方法，傳遞相對路徑和參數(shù)作為div的內(nèi)容
setDivContent("#myDiv", "這是一個帶參數(shù)的div示例");
// 可以根據(jù)需要多次調(diào)用setDivContent方法，傳遞不同的相對路徑和參數(shù)
// setDivContent("#anotherDiv", "另一個參數(shù)");
</script>
</body>
</html>
網(wǎng)頁效果
這時改變div的結(jié)構(gòu)，看看效果
在div1? div2之間在加一層div，層級選擇器代碼不動
<div class="div1">
<div>
<div class="div2">
<div id="myDiv" class="my-div"></div>
</div>
</div>
</div>網(wǎng)頁效果
解釋
通過上面這個demo證明了，使用id選擇器進行綁定，改變div層級結(jié)構(gòu)后，傳參不受影響。
解決方案
在實際的項目中，出現(xiàn)了這個問題
1、全局搜索，div的類名或者id名，找到JS文件，找到綁定數(shù)據(jù)部分的代碼。
2、看看是用哪種方式寫的，再來修改div路徑。
工具推薦：文章來源：http://www.zghlxwxcb.cn/news/detail-680636.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-680636.html
到了這里，關(guān)于bug復(fù)刻，解決方案---在改變div層級關(guān)系時，導(dǎo)致傳參失敗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
