Определите атрибут "lang" для <html>.on ('change') и отобразите элементы соответственно - PullRequest
Новая
       74

Определите атрибут "lang" для <html>.on ('change') и отобразите элементы соответственно

0 голосов
/ 06 августа 2020

У меня есть сайт, который использует плагин языкового переводчика для Wordpress. На этом сайте у меня есть изображение «значка сертификации» с английским sh на изображении, но у меня также есть версия на испанском языке sh. Я пытаюсь заставить скрыть версию Engli sh, а версию Spani sh - показывать при изменении атрибута lang HTML, и большая часть работы завершена и работает, только она работает в обратном направлении . Все начинается нормально, но когда я меняю язык сайта на испанский sh, значки не меняются. Затем, когда я снова переключаюсь на английский sh, значки меняются на испанскую sh версию ... Что мне не хватает? Первый блок кода предназначен для начальной загрузки страницы, а второй ищет событие изменения из плагина. 

//  Change PPE Badges based on language

if (jQuery("html").attr("lang").toLowerCase() === 'es' || jQuery("html").attr("lang").toLowerCase() === 'es-mx') {
    jQuery('.badgeSpanish').show();
    jQuery('.badgeEnglish').hide();
    console.log('Language: Spanish');
} else {
    jQuery('.badgeSpanish').hide();
    console.log('Language: English');
}

jQuery(document).on('change', 'html', function() {
    if (jQuery("html").attr("lang").toLowerCase() === 'es' || jQuery("html").attr("lang").toLowerCase() === 'es-mx') {
        console.log('Language: Spanish');
        jQuery('.badgeSpanish').show();
        jQuery('.badgeEnglish').hide();
    } else if (jQuery("html").attr("lang").toLowerCase() === 'en' || jQuery("html").attr("lang").toLowerCase() === 'en-us' || jQuery("html").attr("lang").toLowerCase() === 'auto') {
        console.log('Language: English');
        jQuery('.badgeEnglish').show();
        jQuery('.badgeSpanish').hide();
    }
});

Вот пример сайта для демонстрации: http://harsini.staging.wpengine.com/

1 Ответ

0 голосов
/ 06 августа 2020

Попробуйте вместо этого: 

function updateBadge(){ 
    // gets rid of the need to constantly retrieve and mutilate the language
    var language = jQuery("html").attr("lang").toLowerCase();
    // a switch becomes useful because you can check against multiple values
    // and set a default if need be
    switch(language){
        case "es":
        case "es-mx":
            jQuery(".badgeEnglish").hide();
            jQuery(".badgeSpanish").show();
            break;
        default: 
            jQuery(".badgeSpanish").hide();
            jQuery(".badgeEnglish").show();
    }
}
jQuery(document).ready(function(){
    // update the badge as soon as the document is ready
    updateBadge();
    // and update it every time the language is changed
    jQuery(this).on("change", "html", updateBadge);
});
...