如何避免URL追加额外字符串？切换产品属性时URL未替换问题

Got it, the problem here is that your code is just tacking new attribute parameters onto the end of the current URL every time you hover (and trigger a click) on a radio button—instead of replacing the existing attribute values. That's why you're seeing duplicate parameters pile up.

Let's rewrite this to build a clean URL every time, using all currently selected attributes:

First, we need a helper function to get the "base" product URL, stripped of any existing attribute parameters. This way we start fresh each time:

function getBaseProductUrl() {
    const currentUrl = window.location.href;
    const [baseUrl, queryString] = currentUrl.split('?');
    
    // If there are no query params, just return the base URL
    if (!queryString) return baseUrl;
    
    // Parse existing params and remove any attribute_* ones
    const params = new URLSearchParams(queryString);
    for (const key of params.keys()) {
        if (key.startsWith('attribute_')) {
            params.delete(key);
        }
    }
    
    // If non-attribute params remain, add them back to the base URL
    const cleanedQuery = params.toString();
    return cleanedQuery ? `${baseUrl}?${cleanedQuery}` : baseUrl;
}

Then, update your hover/click handler to collect all selected attributes, build a new clean URL, and update the browser address bar:

jQuery('.tax-product_cat input:radio').hover(function() {
    jQuery(this).click();
    
    // Collect all currently selected attributes
    const selectedAttributes = {};
    
    // Grab size attribute if selected
    const selectedSize = jQuery("input[name='attribute_size']:checked").val();
    if (selectedSize) {
        selectedAttributes['attribute_size'] = selectedSize;
    }
    
    // Grab color attribute if selected
    const selectedColor = jQuery("input[name='attribute_color']:checked").val();
    if (selectedColor) {
        selectedAttributes['attribute_color'] = selectedColor;
    }
    
    // Get our clean base URL
    const baseUrl = getBaseProductUrl();
    
    // Build the new attribute query string (handles encoding automatically!)
    const attributeParams = new URLSearchParams(selectedAttributes).toString();
    
    // Construct the final URL
    const finalUrl = attributeParams 
        ? `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${attributeParams}`
        : baseUrl;
    
    // Update the URL without reloading the page
    history.replaceState(null, '', finalUrl);
});

Key fixes here: #

• Clean base URL: We start with a URL that has no old attribute parameters, so we don't append to stale values.
• Collect all attributes: Instead of just adding the current radio's value, we gather all selected attributes each time—so if you change size then color, both are reflected correctly.
• Proper encoding: URLSearchParams automatically handles encoding special characters (like the ' and spaces in your size example: 9' x 12' becomes 9%27+x+12%27 which is exactly what you need).
• Smooth URL update: history.replaceState changes the URL in the address bar without triggering a page refresh, which is better for user experience.

Quick notes: #

• If you have more attributes (like material, weight, etc.), just add similar code to collect their selected values into the selectedAttributes object.
• Double-check that your attribute input name attributes match the keys we're using (e.g., attribute_size for size options).

That should stop the URL from appending parameters and instead replace them with the current selected attribute set every time.

内容的提问来源于stack exchange，提问作者Janjan Flores