javascript - 在同一页面上按需提供 HTML 片段

Question

我想要做的是，在不更改站点位置(例如从 example.com/snippet1 到 example.com/snippet)的情况下，使用选择和只有 html 和 js (如果可能的话)。我想避免加载整个文档(例如，避免加载 10 个“片段”，每个片段加载大约 500 行，而是选择我要加载的一个，同时删除其余部分)。

这是我想到的选择/选择器的示例，我可以使用 js 添加监听器

<select>
    <option value="1">Snippet 1</option>
    <option value="2">Snippet 2</option>
</select>

片段 1:

<div class="s1">
    <p>something</p>
    <img src="s1.jpg"/>
</div>

片段 2:

<div id="s2">
    <div class="s2">
        <iframe src=""></iframe>
    </div>
</div>

这与更改类或 id 无关，因为它们之间的结构可能不同。其目的是尝试使其像 PHP 中的 include 一样工作。

Answer 1

您可以通过使用 jQuery load 并从外部 html 文件请求片段来轻松实现此目的。

这是一个 super 简单的示例，其中您的代码片段文件名必须与选择选项值相对应，但您可以为更复杂的文件名或位置添加 map 。

jQuery 加载引用:http://api.jquery.com/load/

主要js

$('select').on('change', function(event) {
  $('#content').load('snippet' + event.target.value + '.html');
});

index.html

<select>
    <option value="1">Snippet 1</option>
    <option value="2">Snippet 2</option>
</select>
<div id="content"></div>

snippet1.html

<div class="s1">
    <p>something</p>
    <img src="s1.jpg"/>
</div>

snippet2.html

<div id="s2">
    <div class="s2">
        <iframe src=""></iframe>
    </div>
</div>