jQuery属性选择器问题：筛选lang属性元素并修复无属性全隐藏bug

看起来你遇到的问题是原代码只处理了带有lang属性的div，而没有对没有lang属性的div做显示/隐藏控制，导致不符合你“显示指定语言元素，隐藏其余所有元素”的核心需求。

问题分析 #

原代码里$('div[lang]').hide()只选中了带有lang属性的div，之后仅筛选出匹配目标语言的元素显示。但页面中没有lang属性的div完全不会被这个选择器命中，它们的显示状态完全不受控制——这就会出现你描述的“当元素没有lang属性时，所有元素显示异常”的问题。

修复方案 #

我们需要把所有div都纳入控制范围，先统一隐藏，再只显示符合条件的（lang属性等于指定值的）元素：

function lang(l) {
    // 先隐藏所有div
    $('div').hide()
    // 筛选出lang属性等于指定值的div并显示
    .filter(function() {
        return $(this).attr('lang') === l;
    }).show();
};

或者用更简洁的属性选择器写法，性能也更优：

function lang(l) {
    $('div').hide();
    $('div[lang="' + l + '"]').show();
};

这样不管div有没有lang属性，都会先被隐藏，只有匹配目标语言的元素才会显示，完美贴合你的需求。

代码优化建议 #

为了让代码更简洁、可维护，我们可以封装重复的逻辑：

1. 添加可靠的Cookie获取辅助函数：

function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}

2. 封装语言Cookie设置函数：

function setLangCookie(lang) {
    const expiryDate = new Date();
    expiryDate.setTime(expiryDate.getTime() + 31536000000); // 设置1年有效期
    document.cookie = `language=${lang}; expires=${expiryDate.toUTCString()}; path=/`;
}

3. 简化初始化和点击事件逻辑：

// 页面加载时初始化语言
const savedLang = getCookie("language");
if (savedLang === "en" || savedLang === "fr") {
    lang(savedLang);
}

// 绑定语言切换点击事件
$(".en").click(() => {
    lang("en");
    setLangCookie("en");
});

$(".fr").click(() => {
    lang("fr");
    setLangCookie("fr");
});

优化后的代码结构更清晰，也避免了重复的Cookie操作代码。

内容的提问来源于stack exchange，提问作者Handy Andy Mutter