按钮点击传递productID后始终重定向至错误页面的问题求助
按钮点击传递productID后始终重定向至错误页面的问题求助
我写了一段JavaScript代码,希望实现点击不同按钮时,根据对应的productID跳转到不同的产品详情页。但现在遇到了一个奇怪的问题——不管我点击哪个按钮(对应productID是scse1或bv9x),页面最终都会跳转到productID为tse2的产品页面。之前只传一个productID的时候URL参数是正常工作的,但多产品ID就出问题了。
我的相关代码如下:
JavaScript代码:
document.addEventListener("DOMContentLoaded", () => { const image1 = document.querySelector(".image1"); const image2 = document.querySelector(".image2"); const image3 = document.querySelector(".image3"); const image4 = document.querySelector(".image4"); const productBrand = document.querySelector(".productBrand"); const productBrandModel = document.querySelector(".productBrandModel"); const productPrice = document.querySelector(".productPrice"); const productDescription = document.querySelector(".productDescription"); const productHighlight1 = document.querySelector(".highlight1"); const productHighlight2 = document.querySelector(".highlight2"); const productHighlight3 = document.querySelector(".highlight3"); const paramString = new URLSearchParams(window.location.search); const productID = paramString.get("productID"); if (productID === 'scse1') { image1.src = "https://embed.widencdn.net/img/dorelrl/0erx2wjalz/1100px@1x/C21_C24251M_Scalpel_Crb_SE_1_ABB_D6.webp?color=E2ECF2&q=99"; image2.src = "https://embed.widencdn.net/img/dorelrl/qs23gi2pyn/1100px@1x/C21_C24251M_Scalpel_Crb_SE_1_ABB_D3.webp?color=E2ECF2&q=99"; image3.src = "https://embed.widencdn.net/img/dorelrl/ou3jhkydp5/1100px@1x/C21_C24251M_Scalpel_Crb_SE_1_ABB_PD.webp?color=E2ECF2&q=99"; image4.src = "https://embed.widencdn.net/img/dorelrl/ri0i4qyg0o/1100px@1x/C21_C24251M_Scalpel_Crb_SE_1_ABB_D1.webp?color=E2ECF2&q=99"; productBrand.textContent = "cannondale"; productBrandModel.textContent = "Scalpel Carbon SE 1"; productPrice.textContent = "$4,700"; productDescription.textContent = "Scalpel SE is the ultimate marathon racer and high-speed trail slayer. World Cup fast and all-mountain fierce – this is next-level cross-country mountain bike performance."; productHighlight1.textContent = "Lightweight carbon FlexPivot frame / New RockShox Sid Select+ RL 120mm fork / Integrated Cannondale App connectivity"; productHighlight2.textContent = "Shimano XT hydraulic disc 12-speed group / HollowGram crank"; productHighlight3.textContent = "HollowGram 25 S carbon tubeless-ready wheels / Cannondale DownLow dropper post / Stash kit"; document.title = "Gear up | Scalpel Carbon SE1"; } else if(productID === 'bv9x'){ image1.src = '';// image2.src = '';// Leaving these 3 src empty, cuz I didn't find a proper img. image3.src = '';// image4.src = 'https://www.polygonbikes.com/wp-content/uploads/2023/07/MY23-BEND-R9V-P.png'; // Update this with appropriate image source productBrand.textContent = "cannondale"; productBrandModel.textContent = "Bend V9X"; productPrice.textContent = "$4,000"; productDescription.textContent = "A mountain bike built to raise your game and ignite a passion for the trail. Designed for the mountains and ready for anything."; productHighlight1.textContent = "Premium SmartForm C2 Alloy frame / RockShox 35 Silver R 120mm 120mm fork"; productHighlight2.textContent = "SRAM SX Eagle 12-speed drivetrain / Shimano MT400 hydraulic disc brakes"; productHighlight3.textContent = "Integrated connectivity with Cannondale App / dropper seatpost"; document.title = "Gear up | Bend V9X"; } else if(productID === 'tse2'){ image1.src = "https://embed.widencdn.net/img/dorelrl/tsmcgaee6k/1100px@1x/C21_C26201M_Trail_SE_2_EMR_D5.webp?color=e0f1ee&q=99"; image2.src = "https://embed.widencdn.net/img/dorelrl/2hbbm76enp/1100px@1x/C21_C26201M_Trail_SE_2_EMR_D3.webp?color=e0f1ee&q=99"; image3.src = "https://embed.widencdn.net/img/dorelrl/fr6dfv3kgd/1100px@1x/C21_C26201M_Trail_SE_2_EMR_PD.webp?color=e0f1ee&q=99"; image4.src = "https://embed.widencdn.net/img/dorelrl/a1roymo8k1/1100px@1x/C21_C26201M_Trail_SE_2_EMR_D1.webp?color=e0f1ee&q=99"; productBrand.textContent = "cannondale"; productBrandModel.textContent = "Trail SE2"; productPrice.textContent = "$2,010"; productDescription.textContent = "A mountain bike built to raise your game and ignite a passion for the trail. Designed for the mountains and ready for anything."; productHighlight1.textContent = "Premium SmartForm C2 Alloy frame / RockShox 35 Silver R 120mm 120mm fork"; productHighlight2.textContent = "SRAM SX Eagle 12-speed drivetrain / Shimano MT400 hydraulic disc brakes"; productHighlight3.textContent = "Integrated connectivity with Cannondale App / dropper seatpost"; document.title = "Gear up | Trail SE2"; } });
HTML代码:
<div class="slides-container"> <div class="slide active slide1"> <h1 class="brand">Cannondale</h1> <h2 class="model">Scalpel Carbon <bold>SE 1</bold></h2> <img class="modelImg" src="assets/slider/Scalpel Carbon SE 1.png" /> <button class="learn" id="scse1" onclick="location.href='productPages.html?productID=scse1'">Buy now</button> </div> <div class="slide slide2" > <h1 class="brand">Polygon</h1> <h2 class="model">Bend <bold>v9x</bold></h2> <img class="modelImg" src="assets/slider/BendV9X.png" style="height: 700px; top: -10px" /> <button class="learn" id="bv9x" onclick="location.href='productPages.html?productID=bv9x'">Buy now</button> </div> <div class="slide slide3"> <h1 class="brand">Cannondale</h1> <h2 class="model">Trail <bold>se 2</bold></h2> <img class="modelImg" src="assets/slider/trail se 2.png" style="height: 720px; top: -70px" /> <button class="learn" id="tse2" onclick="location.href='productPages.html?productID=tse2'">Buy now</button> </div> </div>
我已经做的排查:
我仔细检查了每个按钮的id属性,确认它们和对应的productID是完全匹配的。但实际测试时,比如点击scse1的按钮,跳转后的URL却是productPages.html?productID=tse2,完全不符合预期。
希望各位能帮我分析下这个重定向问题的根源,以及给出修复方案,让每个按钮都能正确跳转到对应productID的产品页面,非常感谢!
备注:内容来源于stack exchange,提问作者Rudra
相关产品推荐
相关产品推荐

