translate.js中英文切换

        这次工作要写几个幽默的官网，还需要加中英文切换，用的框架是phpcms（技术栈都快比我弟老了），随便找了翻译插件：translate.js，

        下面是代码是抄了别人的再改了一些，从某段开始我自己也忘记是啥用途了，建议根据情况复制，中间往下似乎是无用代码，就做了个点击切换class或者切换图片这种操作，原帖找不到了，只剩这个我自己胡改剩下的代码。

        请品鉴小史山

// const langCN = {
// }
// const langEN = {
// }

$(function () {
    var defaultLang = sessionStorage.getItem('defaultLang') || 'en'
    console.log('我执行了翻译js')
    function langChange(defaultLang) {
        //
        //
        translate.setAutoDiscriminateLocalLanguage();//检测用户所在国家切换，首次使用
        translate.ignore.class.push('ignore-translate');//翻译忽略指定class   注意，这行要放到 translate.execute(); 上面
        translate.selectLanguageTag.show = false; //隐藏默认显示底部的select的选择语言
        translate.images.add({//添加指定的翻译路径，替换为_english
            // "/uploads/a.jpg":"https://www.zvo.cn/a_english.jpg", //前是检索的路径，后是要替换为的图片网址，注意要用绝对路径的
            // "/uploads/b.jpg":"https://www.zvo.cn/b_english.jpg",
            "http://test.luhuan.com/statics/images/otherpage/tosearch.jpg":"http://test.luhuan.com/statics/images/otherpage/tosearch_english.jpg"
        });
        if(defaultLang != 'cn'){
            var elements = document.querySelectorAll('[data-english]');
            elements.forEach(function(element) {
                console.log('你真运行了？')
                var customValue = element.getAttribute('data-english');
                element.innerHTML = customValue;
            });
        }

        translate.execute();
        //
        //

        console.log('有没有转换')
        let language = defaultLang == 'cn' ? langCN : langEN
        if( defaultLang == 'cn'){
            console.log('中文')

            // 隐藏 id 为 englishHeader 的元素
            $('#englishHeader').hide();
            // 显示 id 为 cnHeader 的元素
            $('#cnHeader').show();


            $('.iscn').addClass('active');
            $('.isen').removeClass('active');//改变中英文的蓝色
            translate.language.setDefaultTo('chinese');//切换默认显示中英文的效果
        }else{
            console.log('英文')
            // var myImage = document.getElementById("topImg");
            // if(myImage){
            //   var imagePath = myImage.src;
            //   var newImagePath = imagePath.replace(".jpg", "_EN.jpg");//修改top图的中英文
            //   myImage.src = newImagePath;
            // }

            // 隐藏 id 为 cnHeader 的元素
            $('#cnHeader').hide();
            // 显示 id 为 englishHeader 的元素
            $('#englishHeader').show();


            $('.isen').addClass('active');
            $('.iscn').removeClass('active');
            translate.language.setDefaultTo('english');//默认语言转英文

            const banner = document.querySelector('.otherpage_banner');//获取banner，有的话替换banner图为en后缀
            if(banner){
                const img = banner.querySelector('img');
                const src = img.src;
                console.log('有newImagePath吗')
                console.log(src)
                console.log(newImagePath)
                var newImagePath = src.replace(".jpg", "_EN.jpg")
                img.src=newImagePath
            }


        }


        let domList = document.querySelectorAll('[lang]')
        $(domList).each(function (i) {
            if ($(this).val() != null && $(this).val() != '') {
                $(this).val(language[$(this).attr('lang')])
            }
            if ($(this).html() != null && $(this).html() != '') {
                $(this).html(language[$(this).attr('lang')])
            }
            if ($(this).attr('placeholder') != null && $(this).attr('placeholder') != '') {
                $(this).attr('placeholder', language[$(this).attr('lang')])
            }
        })

    }
    langChange(defaultLang)
    $('.iscn').click(function () {
        $('.isen').removeClass('active');
        $('.iscn').addClass('active');

        defaultLang = 'cn'
        langChange(defaultLang)
        sessionStorage.setItem('defaultLang', defaultLang)
    })
    $('.isen').click(function () {
        $('.iscn').removeClass('active');
        $('.isen').addClass('active');

        defaultLang = 'en'
        langChange(defaultLang)
        sessionStorage.setItem('defaultLang', defaultLang)
    })




})

插件挺厉害，就是翻译的时候。导航栏文字会溢出，固定宽高的按钮最多三个汉字，翻译完直接掉出去了，这里懒得动脑，可以用js做自定义属性替换

<span data-english="Product Launch">前端在data-english写要翻译的英文</span>

<script>
        if(defaultLang != 'cn'){
            var elements = document.querySelectorAll('[data-english]');
            elements.forEach(function(element) {
                console.log('这段是jquery？获取标签data-english的值，替换里面的字为要改的英文')
                var customValue = element.getAttribute('data-english');
                element.innerHTML = customValue;
            });
        }
</script>

插件切换中英文时，可能从中文闪一下再变英文，懒得动脑问下ai，不想动脑的话用下面的可以解决，本质上就是等，拖半秒已经转化完了，这时候看就是英文了，

<style>body{display: none}</style>
<script>
    window.onload=function (){
        //放到body或者哪都行
        document.body.style.display='block'
    }
</script>

写的多少有些史山，有更好的代码欢迎评论区指教，