跳转页面后为选中图片添加CSS样式不生效问题排查求助

核心问题点 #

• 选择器范围错误：匹配到对应a标签后，你使用全局选择器$('.sku-img')选中了页面所有sku图片添加selected类，而非仅选中当前匹配a标签下的图片，这是最主要的问题。
• 匹配规则冗余（可选优化）：直接对比完整href会因为URL带查询参数、锚点后缀导致匹配失败，建议对比路径部分即可。
• CSS权重不足风险：如果你的项目里有其他针对.sku-img的宽度样式，类选择器权重相同的情况下，写在后面的样式会覆盖selected的样式，显式指定img.selected可以提升权重保证生效。

修复后代码 #

JS代码 #

jQuery(document).ready(function(){
    // 仅对比路径部分，忽略参数、锚点，也可根据需求改回完整href对比
    let currentPath = window.location.pathname;
    $('.sku-url').each(function() {
        if (this.pathname === currentPath) {
            // 只给当前匹配的a标签下的img添加选中样式
            $(this).find('.sku-img').addClass('selected');
        }
    }); 
});

CSS代码 #

img {
    width: 200px;
}
/* 标签+类组合提升权重，避免被其他样式覆盖 */
img.selected {
    width: 250px;
}

注意事项 #

测试时请将a标签的href属性替换为跳转后的实际页面路径，不要使用#测试。

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