Javascript声明问题答案

【问题标题】：Java Script declaration issueJavascript声明问题
【发布时间】：2018-01-25 00:06:18
【问题描述】：

let main = document.createElement("div"),
    togBtn = document.createElement("button"),
    divOne = document.createElement("div"),
    divTwo = document.createElement("div"),
    divThree = document.createElement("div"),
    blockQ = document.createElement("blockquote"),
    head2 = document.createElement("h2"),
    hr = document.createElement("hr"),
    textOne = document.createElement("p"),
    textTwo = document.createElement("p"),
    delBtn = document.createElement("button")

有没有更好的方法来获得这个结果。可能使用 EJS6 或 jQuery？这是最终结果。其中一些是彼此的孩子

            <div class="classes" data-class="XII">
            <button onclick="tog('XII')" class="btn btn-block text-mono btn-outline-secondary">XII</button>
            <div id="XII" style="display: none;">
                <div class="card mb-3 text-center bg-secondary text-light border-0">
                    <div class="card-body">
                        <blockquote class="card-blockquote">
                            <h2 class="display-4">XII</h2>
                            <hr class="my-4">
                            <p class="lead">XII has 5 days per week and will study 6 subjects per day</p>
                            <p>During the week they will study: Mathematics, Physics, Biology, etc.</p>
                            <button class="btn btn-shadow text-mono btn-danger">Delete</button>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>

【问题讨论】：

这完全取决于你如何处理这些元素，以及它们如何相互关联。您能否提供更完整的代码示例。例如，这些元素是彼此的子/兄弟吗？它们是附加到单个容器还是整个文档？它们可以从预先存在的结构中克隆出来吗？
做出改变
在这种情况下，1) 将 HTML 放在页面中但用 CSS 隐藏它是有意义的。然后，当你需要它时，clone() 它，修改它然后show() 它。 2) 将其作为字符串存储在 JS 中，并在一次操作中将其附加到 DOM。在这两者中，我更喜欢前者，因为它消除了 JS 代码中的 UI 依赖性。
我会使用前一个我也不喜欢JS代码中的UI依赖。谢谢
罗里所说的。而且，为了让生活更轻松，而不是拥有一个对特定 id 执行操作的按钮（即tog("XII")），让它对 DOM 中的下一个元素执行该按钮的操作（即tog(this)），然后，this.nextSibling.style.display = '' 在您的处理程序中。这样一来，您就可以在不使用 id 的情况下获得适用于页面上每个按钮的功能。

标签： javascript jquery optimization ejs

【解决方案1】：

您可以使用模板文字：

const template = ({title, lead, description}) => `<div class="classes" data-class="XII">
  <button onclick="tog('XII')" class="btn btn-block text-mono btn-outline-secondary">XII</button>
    <div id="XII" style="display: none;">
        <div class="card mb-3 text-center bg-secondary text-light border-0">
            <div class="card-body">
                <blockquote class="card-blockquote">
                    <h2 class="display-4">${title}</h2>
                    <hr class="my-4">
                    <p class="lead">${lead}</p>
                    <p>${description}</p>
                    <button class="btn btn-shadow text-mono btn-danger">Delete</button>
                </blockquote>
            </div>
        </div>
    </div>
</div>`;
const $html = $(template({
  title: 'my title',
  lead: 'my lead',
  description: 'my description'
});

【讨论】：

是的，但我不喜欢 JS 代码中的 UI
您可以将实际的 HTML 代码作为容器放在脚本标签中，然后使用模板引擎进行渲染。 stackoverflow.com/questions/4912586/…
哦，太好了，谢谢