JQuery语言切换点击事件需双击才触发的问题求助

云上老周

2026-7-16

语言切换按钮首次需双击触发的问题修复

问题根源

你HTML里的.language元素文本是EN （末尾带空格），但JS判断条件里写的是== "EN"——首次点击时，文本实际是带空格的EN ，和EN不匹配，直接走else分支把文本改成了EN，第二次点击才会触发正确的切换逻辑。

两种修复方法

方法1：清理HTML里的多余空格

直接修改.language的内容，去掉末尾空格：

<div class="language">EN</div>

方法2：在JS里处理文本空格

用$.trim()去掉文本前后的空格后再判断，同时可以删掉原代码里多余的嵌套函数，让代码更简洁：

$(document).ready(function(){
    $(".language-switch").click(function(){
        const langText = $.trim($(this).children(".language").text());
        if (langText === "EN") {
            $(this).children(".language").text("ID");
            $("#main").attr("class", "lang-id");
        } else {
            $(this).children(".language").text("EN");  
            $("#main").attr("class", "lang-en");      
        }
        console.log($.trim($(this).children(".language").text()));
        console.log($("#main").attr("class"));
    });   
});