基于两个单选组选择设置按钮链接的JavaScript实现求助

Hey there! Let's fix this so you can handle all 40 size + quantity combinations cleanly. Your current code only checks one specific pair, but we can use a mapping object to make this scalable and easy to maintain.

核心思路 #

Instead of writing 40 if/else statements, we'll create a structured object that maps every combination of size (variant) and quantity to its target URL. Then, whenever a radio button is changed, we'll grab the selected values, look up the URL in our map, and update the link.

完整实现代码 #

First, here's the updated JavaScript (make sure it's placed after the jQuery script tag):

// 第一步：创建所有组合的URL映射表
const variantUrlMap = {
  // 键是variant的value，对应每个尺寸
  "79": {
    // 键是quantity的value，对应每个数量的URL
    "50": "https://cruxstickers.com/product/2x2-50/",
    "100": "https://cruxstickers.com/product/2x2-100/",
    "200": "https://cruxstickers.com/product/2x2-200/",
    // 继续添加该尺寸对应的其他7个数量URL
  },
  "78": {
    "50": "https://cruxstickers.com/product/3x3-50/",
    "100": "https://cruxstickers.com/product/3x3-100/",
    "200": "https://cruxstickers.com/product/3x3-200/",
    // 继续添加该尺寸对应的其他7个数量URL
  },
  // 在这里添加另外2种尺寸的variant value对应的映射（比如"77"、"76"等）
};

// 第二步：编写通用的更新链接函数
function updateProductLink() {
  // 获取当前选中的variant和quantity的值
  const selectedVariant = $('input[name="variant_id"]:checked').val();
  const selectedQuantity = $('input[name="quantity"]:checked').val();
  
  // 从映射表中查找对应URL，找不到则用默认值
  const targetUrl = variantUrlMap[selectedVariant]?.[selectedQuantity] || "https://www.google.com";
  
  // 更新按钮链接的href属性
  $("#myLink").attr('href', targetUrl);
}

// 第三步：绑定事件，监听单选按钮的变化
$(document).ready(function() {
  // 页面加载完成后，先初始化一次链接（处理默认选中的选项）
  updateProductLink();
  
  // 监听所有单选按钮的change事件
  $('#product-options-form input[type="radio"]').on('change', updateProductLink);
});

关键改进点 #

• Scalable Mapping: The variantUrlMap lets you easily add/remove combinations without rewriting logic. Just match the value attribute of your radio buttons to the keys in the object.
• Reliable Event: Using change instead of click ensures we only trigger the update when the selection actually changes (avoids false triggers from clicking already selected buttons).
• Initial State Handling: We call updateProductLink() on page load to set the correct URL for the default selected options.
• Valid Default URL: Fixed the default URL to include https:// so it doesn't act as a relative path.

注意事项 #

• Make sure the keys in variantUrlMap exactly match the value attributes of your variant_id and quantity radio buttons (e.g., "79" matches the value="79" in your size radio).
• For the remaining 38 combinations, just fill in the corresponding URLs in the map object—no extra code needed!

内容的提问来源于stack exchange，提问作者Mason J