You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

按钮点击传递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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.20 07:49:32