使用Greasemonkey/JQuery隐藏LV网页价格元素失败，求解决办法

云上老周

2026-7-26

解决Greasemonkey隐藏LV网页价格无效的问题

问题根源

你的脚本执行时机过早，LV页面基于Vue动态渲染DOM，脚本运行时目标价格元素还未被创建，导致$(".lv-product-card__price.body-xs").hide()找不到对应元素。同时，直接用jQuery的hide方法只能处理已存在的元素，无法覆盖后续加载的动态元素。

解决方案

方案1：使用GM_addStyle注入CSS（推荐）

这种方式更高效，能自动作用于所有现有和后续动态生成的价格元素，无需依赖jQuery：

// ==UserScript==
// @name        hide-LV-prices
// @include     https://ap.louisvuitton.com/*
// @description Hides prices on Louis Vuitton page  
// @grant       GM_addStyle
// ==/UserScript==

GM_addStyle(`
    .lv-price.lv-product-card__price.body-xs {
        display: none !important;
    }
`);

移除不必要的jQuery依赖，减少资源加载
!important确保样式优先级高于页面原有样式，避免被覆盖

方案2：等待动态元素加载后执行隐藏操作

如果坚持使用jQuery，可以通过监听DOM变化或等待元素出现来执行：

// ==UserScript==
// @name        hide-LV-prices
// @include     https://ap.louisvuitton.com/*
// @description Hides prices on Louis Vuitton page  
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       none
// ==/UserScript==

// 等待元素出现的工具函数
function waitForElement(selector, callback) {
    if ($(selector).length) {
        callback();
    } else {
        setTimeout(() => waitForElement(selector, callback), 500);
    }
}

// 先等待初始元素加载，再监听DOM变化处理后续元素
waitForElement(".lv-product-card__price.body-xs", function() {
    $(".lv-product-card__price.body-xs").hide();
    const observer = new MutationObserver(() => {
        $(".lv-product-card__price.body-xs").hide();
    });
    observer.observe(document.body, { childList: true, subtree: true });
});