javascript - 使用 Javascript 的动态 HTML : Fill same HTML object with different contents

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) 显示仅更改属性所需的内容.

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

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;
}