Автозагрузка специфичного для языка контента из внешнего HTML-файла HTML - PullRequest
Новая
       11

Автозагрузка специфичного для языка контента из внешнего HTML-файла HTML

0 голосов
/ 05 декабря 2018

Сайт статичный.Я поставил селектор языка на HTML.Я загружаю внешний HTML-контент Div.

Проблемы:

  • (a) По умолчанию он загружает оба языка из внешнего HTML-содержимого Div
  • (b)Если я ограничиваю его загрузкой только одного языка, то содержимое не будет автоматически заменено на «язык клика»

например, два клика должны быть выполнены один на языке, а другой на «head link ", чтобы изменить внешний контент div на тот, который следует за изменением языка.

Основной HTML-файл" start.html "

    <!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- google web font css -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--- Search functionality --->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
</head>



<body class="bd">

    <a id="idStatistics"     href ="#Statistics"      > <span lang="en">Statistics      </span>     <span lang="gr">Στατιστική      </span>   </a> 


    <!--- The country flags --- Language Selector --->
    <a href="#el" id="lang_switch_gr" class="greek_flag" >
    <img title="greek_flag" src="img/Greek_flag_02.png" 
    alt=""/>
    </a>   

    <a href="#en" id="lang_switch_en" class="uk_flag" >
    <img title="uk_flag" src="img/uk_flag_01.png" 
    alt=""/>
    </a>   




<span lang="en">    To the extent possible under law,  </span>     

<span lang="gr">    έχει αποποιηθεί όλα τα δικαιώματά του επί του περιεχομένου του </span>



<p>-----------------------------------------------</p>
<div id="mainbody" class="mainbody">   </div>
<p>-----------------------------------------------</p>
<div id="mainbody_2" class="main_body">  </div>


</body><!-- body closing --> 


<script>
    // stackoverflow: 49637061  &  11134701 

    var lang="en";
      $('[lang="en"]').show();
      $('[lang="gr"]').hide();
           $(document).on('click', '#idStatistics', function(){
            $("#mainbody").load("Stats.html #st #en").data('url_idStatistics', "Stats.html#st#en");
          });  


     $("#lang_switch_gr").click(function(){
              var lang="gr";
    $('[lang="gr"]').show();
    $('[lang="en"]').hide();  
           $(document).on('click', '#idStatistics', function(){
            $("#mainbody").load("Stats.html #st").data('url_idStatistics', "Stats.html#st");
          });   
          });    

 $("#lang_switch_en").click(function(){
              var lang="en";
$('[lang="en"]').show();
$('[lang="gr"]').hide();
           $(document).on('click', '#idStatistics', function(){
            $("#mainbody").load("Stats.html #st").data('url_idStatistics', "Stats.html#st");
          });  
          });    
</script>

</html>

" external "stats.html "файл, содержимое которого загружается в основное тело файла start.html.

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- stylesheet css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- google web font css -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>


</head>
    <body>
        <div id="st"  class="stat">

<span lang="en">    Statistics is a science based on probabilities  </span>     

<span lang="gr">   στατιστική   στατιστική   στατιστική   στατιστική    </span>

</div>
</body>


</html>

Все эти методы потерпели неудачу: 

<script>

$(window).on('click', function () {
$("#lgr").hide();
});


$("#idStatistics").on('load', function () {
$("#lgr").hide();
});

 if ( $('#mainbody').hasClass('lgr') ) {
         $("#lgr").height(0);
        }; 

  $(document).ready(function(){
     $('html').closest('#mainbody').removeClass('lgr');
    });


$("#idStatistics").click(function () {
   $("#lgr").hide();
});    


</script>
...