Javascript код HTML файла, вызывающего jQuery во внешнем HTML файле - PullRequest
Новая
       0

Javascript код HTML файла, вызывающего jQuery во внешнем HTML файле

0 голосов
/ 06 мая 2020

У меня есть файл HTML, который запускает код javascript, выполняющий, помимо прочего, также некоторые вызовы jQuery. Я хотел бы отделить часть моего кода HTML во внешнем файле, потому что я хотел бы использовать его как общий файл для нескольких файлов HTML, и я хотел бы, чтобы код javascript мог выполнять jQuery обращается также к внешнему файлу. Есть предложения по этому поводу? Я новичок в javascript, поэтому любые предложения о дальнейших действиях были бы очень полезны.

Вот пример, показывающий мою проблему. Обратите внимание, что в коде HTML я указал часть, которую хочу отделить.

HTML

<html>
  <head>
    <title>MWE</title>
    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous">
    </script>
    <script src="js/init.js">
    </script>
  </head>
  <body>
    <h1><a class="mobileUI-site-name">My website</a></h1>
    <!-- PORTION TO EXTRACT: begin
    <nav id="nav" class="mobileUI-site-nav">
      <ul>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a>
            <ul>
              <li><a href="#">A</a></li>
              <li><a href="#">B</a></li>
            </ul>
          </li>
      </ul>
    </nav>
    PORTION TO EXTRACT: end -->
    <div> Some text here </div>
  </body>
</html>

Javascript (только процентная доля) 

var x = jQuery('.mobileUI-site-name'), site_name = (x.length > 0 ? x.html() : ''),
    site_nav_options = new Array();

jQuery('.mobileUI-site-nav a').each(function() {
    var t = jQuery(this), indent;
    indent = Math.max(0,t.parents('li').length - 1);
    site_nav_options.push(
    '<div class="mobileUI-site-nav-link><span class="indent-' + indent + '"></span>' + t.text() + '</div>'
    );
});

Для код HTML я должен просто включить в заголовок 

<script>
   $(function(){
      $("#top-menu").load("./common/menu.html");
   });
</script>

и правильный <div id="top-menu"></div> в тело. Как мне изменить код javascript?

1 Ответ

0 голосов
/ 06 мая 2020

Этот ответ может быть полезным: Включите другой файл HTML в HTML файл . В нем объясняется, как импортировать HTML в существующий HTML, используя JQuery. В частности, 

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

, где контент, который вы хотите извлечь, нужно поместить в «b. html». Чтобы получить доступ к добавленному HTML, вам нужно будет использовать обратный вызов, как описано здесь: https://api.jquery.com/load/

$("#includedContent").load("b.html", function() {
  alert( "Load was performed." );
});

Т.е. замените команду предупреждения на все, что вы хотите сделать с JQuery, что влияет на загруженные HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...