使用 Javascript 的动态 HTML：用不同的内容填充相同的 HTML 对象

Question

这是一般问题：
当有 HTML 对象根据 DOM 事件以不同方式填充时，哪个是最佳解决方案？

我的情况尤其如此：
我有一个导航栏，其中每个按钮都显示一个模态。模态框的骨架始终相同，但正如您想象的那样，内容会根据按钮而变化。
然后我想使用 Javascript 和 onclick 属性让每个按钮以不同的方式填充模式，这或多或少是它的样子：

<li><a data-toggle="modal" data-target="#myModal" id="button1" onclick="fillmodal(this.id)">Text button1</a></li>
<li><a data-toggle="modal" data-target="#myModal" id="button2" onclick="fillmodal(this.id)">Text button2</a></li>
<li><a data-toggle="modal" data-target="#myModal" id="button3" onclick="fillmodal(this.id)">Text button3</a></li>

让我们想象一下：

Button1 必须只显示模态框内带有一些图像的文本。
Button2 必须在模态框内显示一个带有文本区域和提交按钮的表单。
Button3 必须显示与 Button2 相同的形式，但多了 2 个字段。

如您所见，内容始终不同，但某些元素可以共享（在我们的示例中，Button2 和 Button3 显示的文本区域就是这种情况）。

有很多不同的方法可以解决这个问题：

我可以在 HTML 中编写一个完全空的模式，函数 fillmodal(elementId) 可以完成所有工作来填充它，但我发现这个解决方案非常难看，因为它需要在脚本中使用很多行来填充模式，那么另一种解决方案是使用 AJAX 请求，以便直接从服务器获取内容。
我认为第二种解决方案在按钮很多的情况下是最好的。

到目前为止，我找到的最好的解决方案是将所有内容直接写在模态中作为 hidden 元素，并使函数 fillmodal(elementId)show 只需更改属性即可。

您认为哪个是最佳解决方案？

Answer 1

针对您要实现的目标有很多不同的解决方案。

这是一个（每个按钮一个模式）：

<li><a id="button1" onclick="showmodal(this.id)">Text button1</a></li>
<li><a id="button2" onclick="showmodal(this.id)">Text button2</a></li>
<li><a id="button3" onclick="showmodal(this.id)">Text button3</a></li>

<div style="display: none;" class="modal" id="button1_content">Content 1</div>
<div style="display: none;" class="modal" id="button2_content">Content 2</div>
<div style="display: none;" class="modal" id="button3_content">Content 3</div>

function showmodal(id) {
    document.getElementById(id+'_content').style.display = "block";
}

这是另一个（从另一个 div 获取模态的 html）：

<li><a id="button1" onclick="showmodal(this.id)">Text button1</a></li>
<li><a id="button2" onclick="showmodal(this.id)">Text button2</a></li>
<li><a id="button3" onclick="showmodal(this.id)">Text button3</a></li>

<div style="display: none;" id="button1_content">Content 1</div>
<div style="display: none;" id="button2_content">Content 2</div>
<div style="display: none;" id="button3_content">Content 3</div>

<div id="modal">Content 3</div>

function showmodal(id) {
    document.getElementById('modal').innerHTML =
      document.getElementById(id+'_content').innerHTML;
}

使用 Javascript 的动态 HTML：用不同的内容填充相同的 HTML 对象

Dynamic HTML using Javascript: Fill same HTML object with different contents

html

javascript

css

dom