Question

我有一个用于将html文件加载到页面的脚本。一切正常，但是我想要类似“循环”的内容来加载列表中的每个位置。

所以我有个剧本

<script>
    $(document).ready(function(){
      $("#introduction").click(function(){
        $("#main_info").load("introduction.html");
      });
    });
    </script>

然后我从菜单“简介”中加载职位。

  <ul>
            <li><a href="#" id="home"><i class="home"></i>home</a></li>
            <li><a href="#" id="introduction"><i class="introduction"></i>introduction</a></li>
            <li><a href="#" id="structure"><i class="structure"></i>structure</a></li>
        </ul>

但是如何更改此脚本以尝试使用我的UL LI A中的每个位置？

就像当我单击带有家的Li时一样，我将加载home.html，introduction = Introduction.html和structure = structure.html ??

Answer 1

尝试：

$("a").click(function (){
 $(this).find("i").load($(this).attr("id")+".html");
});

Answer 2

您可以使用.each()中的JQuery来实现这种“循环”逻辑，就像这样：

$(document).ready(function(){
  $('ul li a').each(function() {  // <-- Iterate throught all your links
    $(this).click(function(){
      var fileToLoad = $(this).attr('id') + '.html';
      $("#main_info").load(fileToLoad);
    });
  });
});

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
<ul>
  <li><a href="#" id="home"><i class="home"></i>home</a></li>
  <li><a href="#" id="introduction"><i class="introduction"></i>introduction</a></li>
  <li><a href="#" id="structure"><i class="structure"></i>structure</a></li>
</ul>

一个脚本可以加载许多HTML文件

2 个答案: