jQuery无法识别数组传入的含特殊字符选择器，求解决方案

看起来你的问题出在特殊字符未转义和选择器写法错误上，咱们一步步来修复：

核心错误点 #

1. 选择器缺少#前缀：你代码里的$("" + "cat-" + catNames[i])是要选中id为cat-xxx的元素，但id选择器必须以#开头，所以这里应该写成$("#cat-" + catNames[i])。
2. 特殊字符未转义：你的分类名里包含&、空格这些特殊字符，直接用在jQuery选择器里会触发语法错误（比如你看到的.cat-cloths_&_clothing，这里的&没有被正确处理）。jQuery对选择器里的特殊字符有严格要求，必须转义后才能使用。

修复方案 #

方案1：用$.escapeSelector()转义特殊字符 #

jQuery提供了$.escapeSelector()方法，可以安全转义选择器中的特殊字符。修改你的点击事件代码：

$("#cat-menu ul li").click(function () {
    CatSelect = true;
    catNames.forEach(function(catName) {
        // 转义分类名里的特殊字符，再拼接成id选择器
        var escapedCatName = $.escapeSelector(catName);
        $("#cat-" + escapedCatName).css("background-color", "");
    });
});

方案2：提前处理分类名，替换特殊字符 #

如果不想依赖jQuery的转义方法，你可以在生成id的时候就把特殊字符替换成安全的字符（比如把&换成and，空格换成-），这样后续选择器就不会出问题：

// 生成菜单li的时候就处理分类名
for (var i = 0; i < catNames.length; i++) {
    // 替换特殊字符：&→and，空格→-，确保id合法
    var safeCatName = catNames[i].replace(/&/g, 'and').replace(/\s+/g, '-');
    $("#cat-menu ul").append('<li id="cat-' + safeCatName + '"><span class="tab">' + catNames[i].replace(/\_/g, ' ').toUpperCase() + '</span></li>');
}

// 点击事件里用处理后的安全名称来选择元素
$("#cat-menu ul li").click(function () {
    CatSelect = true;
    catNames.forEach(function(catName) {
        var safeCatName = catName.replace(/&/g, 'and').replace(/\s+/g, '-');
        $("#cat-" + safeCatName).css("background-color", "");
    });
});

额外优化：简化循环代码 #

用forEach代替传统for循环，代码会更简洁易读：

// 生成菜单的代码可以改成
catNames.forEach(function(catName) {
    var safeCatName = $.escapeSelector(catName);
    $("#cat-menu ul").append(`<li id="cat-${safeCatName}"><span class="tab">${catName.replace(/\_/g, ' ').toUpperCase()}</span></li>`);
});

补充说明 #

HTML的id属性虽然允许包含空格和&，但这些字符在CSS选择器和jQuery选择器里属于特殊字符，必须转义才能被正确识别。所以无论是转义还是提前替换，核心都是让选择器的语法符合规范。

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