我有一个 JavaScript 函数,当单击按钮时,它会根据产品 ID 重定向到不同的产品页面。但是,我遇到一个问题,无论我单击哪个按钮(productID 为 scse1 或 bv9x),页面始终会重定向到 ProductID 为 tse2 的产品页面。 URL 参数在用于一个 ProductID 时确实有效,但由于未知原因,它不适用于多个 ProductID。
这是我相关的 Javascript 和 HTML 代码块:
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";
}
});
<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 属性是否与相应的产品 ID 正确对应。但是,当点击任何按钮时,页面总是重定向到productID为tse2的产品页面。
如果您能深入了解为什么会发生此重定向问题,以及如何确保单击每个按钮会根据其产品 ID 重定向到正确的产品页面,我将不胜感激。谢谢!
例如,当我单击productID为scse1的按钮时,它会将我带到productID为tse2的页面,并且URL如下所示:productPages.html?productID=tse2.
我通过人工智能工具运行了你的代码并得到了以下建议: