如何实现页面特定值高亮？Unity资产商店20欧元以上价格高亮方案

核心答案：必须用JavaScript实现 #

因为需要动态解析价格数值，并且要处理分类切换时DOM更新的情况（分类筛选会异步加载新的产品列表，静态CSS无法处理动态内容）。

原代码的问题 #

你提供的代码存在几个关键错误：

• 类选择器错误：.mErEH _223RA 写法错误，两个类名需用.连接（应为.mErEH._223RA），否则会被解析为"寻找.mErEH元素下的_223RA标签"，而非同时拥有两个类的元素
• 逻辑偏离需求：代码是对价格排序取前5，而非判断价格是否超过20欧元
• 未处理动态DOM：分类切换后新加载的产品不会被高亮

正确实现代码 #

JavaScript（基于jQuery，和你原代码风格一致） #

// 定义高亮处理函数
function highlightHighPriceItems() {
  // 遍历所有价格元素（修正类选择器）
  $('.mErEH._223RA').each(function() {
    // 清理价格文本，转换为数字
    const priceStr = $(this).text().trim().replace(/€|,/g, '');
    const price = parseFloat(priceStr);
    // 判断并切换高亮类
    if (!isNaN(price) && price > 20) {
      $(this).addClass('higherthan20');
    } else {
      $(this).removeClass('higherthan20');
    }
  });
}

// 页面加载完成后首次执行
$(document).ready(highlightHighPriceItems);

// 监听产品列表的DOM变化，处理分类切换后的新元素
const productGrid = document.querySelector('.asset-grid'); // 确认产品容器的选择器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mut => {
    if (mut.addedNodes.length) highlightHighPriceItems();
  });
});

// 开启监听：监听子元素变化及子树变化
observer.observe(productGrid, { childList: true, subtree: true });

CSS #

.higherthan20 {
  color: red !important; /* 覆盖原有样式优先级 */
  font-weight: 600; /* 可选：加粗增强视觉效果 */
}

关键说明 #

1. 选择器修正：确保正确选中价格元素，类选择器的组合写法必须用.连接
2. 动态DOM处理：使用MutationObserver监听产品容器的变化，分类切换后新加载的产品会被自动处理
3. 价格解析：清理价格文本中的欧元符号和可能的千分位逗号，避免转换数字失败
4. 样式优先级：原有价格样式可能有更高的优先级，添加!important确保高亮样式生效

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