如何实现带条件判断的动态HTML添加并同步更新块宽度？

核心问题分析 #

• 第一段代码：动态添加的块宽度无法同步更新，因为component变量直接存储了带固定width值的HTML字符串，后续修改width时不会重新生成这些块的样式。
• 第二段代码：无法累加添加块，因为只记录最后一次点击的块ID，每次build_page仅生成该ID对应的单个块，覆盖之前的添加操作。

解决方案 #

核心思路是存储用户添加的块类型，而非直接存储HTML字符串，每次生成代码时根据当前的配置（宽度、标题）重新渲染所有块，既保证宽度同步更新，又支持累加添加。

修改后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <aside>
      <div>
        <label for="title">文档标题</label>
        <input type="text" name="title" id="title" value="我的邮件标题">
      </div>
      <div>
        <label for="width">块宽度(px)</label>
        <input type="number" name="width" id="width" value="600">
      </div>
      <div id="component-filter">
        <button type="button" class="component" data-block-type="block_one">添加基础文本块</button>
        <button type="button" class="component" data-block-type="block_two">添加次级文本块</button>
        <button type="button" id="clear-blocks">清空所有添加的块</button>
      </div>
  </aside>
  <div class="wrapper">
    <div id="output"></div>
  </div>
</body>

JavaScript部分

// 存储用户添加的块类型列表
const addedBlocks = [];
let title = $('#title').val();
let width = $('#width').val();

// 块模板映射，方便后续扩展新块类型
const blockTemplates = {
  block_one: (width) => `<div style="width:${width}px"><p>Lorem</p></div>`,
  block_two: (width) => `<div style="width:${width}px"><p>my second block</p></div>`
};

// 点击添加块按钮
$('.component').on('click', function(){
  const blockType = $(this).data('block-type');
  addedBlocks.push(blockType);
  buildPage();
});

// 清空所有添加的块
$('#clear-blocks').on('click', function(){
  addedBlocks.length = 0;
  buildPage();
});

// 生成完整HTML代码
function buildPage() { 
  title = $('#title').val();
  width = $('#width').val();
  
  // 基础HTML骨架
  let code = `<!DOCTYPE html>
 <html>
 <head>
  <title>${title}</title>
 </head>
 <body>
 <div>
<h1>This is my title page : ${title}</h1>
<div style="width:${width}px"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
`;

  // 遍历添加的块类型，生成对应HTML
  addedBlocks.forEach(blockType => {
    code += blockTemplates[blockType](width);
  });

  code += ` </body>
 </html>`;
  $('#output').html(code);
}

// 初始化生成
buildPage();

// 输入框变化时重新生成代码
$("input").on('input change', buildPage);

代码优化建议 #

• 使用const/let替代var：提升变量作用域安全性，避免全局污染。
• 模块化块模板：用对象映射块类型和模板函数，后续新增块类型只需在blockTemplates中添加，无需修改核心逻辑。
• 添加清空功能：提升用户体验，方便重新调整块组合。
• 监听input事件：相比change事件，能实时响应输入框内容变化，提升交互流畅度。
• 输入验证：可对宽度输入添加最小值（如300px）限制，避免生成无效的宽度值。
• 使用模板字符串：相比字符串拼接，模板字符串更易读、易维护，支持换行和变量直接插入。

内容的提问来源于stack exchange，提问作者blogob