如何缩减含大量项目的多组HTML列表代码行数？

1. 把所有列表数据整理成结构化格式 #

把每个列表的项目信息统一存成JSON数组，只保留核心字段：类型（如classic/shorty）、图片ID、图片路径、显示名称、价格。后续只需要维护这份数据，不用重复编写HTML。

示例数据：

const listData = {
  classic: [
    {
      imgId: 'classic-avalanche',
      imgSrc: 'images/classic/classic_avalanche.png',
      name: 'Classic Avalanche',
      price: 1275
    },
    {
      imgId: 'classic-default',
      imgSrc: 'images/classic/classic_default.png',
      name: 'Classic Default',
      price: 0
    }
    // 其他classic项目...
  ],
  shorty: [
    {
      imgId: 'shorty-aerosol',
      imgSrc: 'images/shorty/shorty_aerosol.png',
      name: 'Shorty Aerosol',
      price: 0
    },
    {
      imgId: 'shorty-default',
      imgSrc: 'images/shorty/shorty_default.png',
      name: 'Shorty Default',
      price: 0
    }
    // 其他shorty项目...
  ]
  // 剩余20个列表的数据...
};

2. 编写通用渲染函数 #

用JavaScript动态生成列表项，复用同一模板结构，同时把原来的classicImage/shortyImage这类重复函数改成通用函数，避免冗余。

// 通用的图片切换和价格设置函数
function updateItem(type, imgId, price) {
  // 切换主显示图
  document.getElementById(`${type}img`).src = document.getElementById(imgId).src;
  // 更新价格显示（假设页面有对应价格元素）
  document.getElementById(`${type}Price`).textContent = price;
}

// 渲染单个列表的函数
function renderList(type, data) {
  const listContainer = document.getElementById(`${type}List`);
  let html = '';
  
  data.forEach(item => {
    // 复用列表项模板
    html += `
      <li class="collection-item">
        <a data-type="${type}" data-imgid="${item.imgId}" data-price="${item.price}">
          <div class="result-container">
            <div class="result">
              <img src="${item.imgSrc}" class="windowimage" id="${item.imgId}">
            </div>
            <p class="skinname">${item.name}</p>
          </div>
        </a>
      </li>
    `;
  });
  
  listContainer.innerHTML = html;
}

// 批量渲染所有列表
function renderAllLists() {
  for (const type in listData) {
    renderList(type, listData[type]);
  }
}

// 页面加载完成后执行渲染
document.addEventListener('DOMContentLoaded', () => {
  renderAllLists();
  
  // 用事件委托处理点击，不用每个a标签写onclick
  document.querySelectorAll('.results').forEach(container => {
    container.addEventListener('click', (e) => {
      const target = e.target.closest('a');
      if (target) {
        const type = target.dataset.type;
        const imgId = target.dataset.imgid;
        const price = parseInt(target.dataset.price);
        updateItem(type, imgId, price);
      }
    });
  });
});

3. 简化HTML结构 #

删掉所有手动写的列表项，只保留空的列表容器，剩下的交给JS动态生成：

<a onclick="showClassic()">
    <div class="classic">
        <img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;">
        <div class="wname" style="width: 150px;">CLASSIC</div>
        <!-- 新增价格显示元素 -->
        <div id="classicPrice">0</div>
    </div>
</a>
<a onclick="showShorty()">
    <div class="shorty">
        <img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
        <div class="wname" style="width: 150px;">SHORTY</div>
        <!-- 新增价格显示元素 -->
        <div id="shortyPrice">0</div>
    </div>
</a>

<div class="results">
    <ul id="classicList"></ul>
</div>

<div class="results">
    <ul id="shortyList"></ul>
</div>
<!-- 其他20个列表的空容器... -->

效果说明 #

• 原来25000行的HTML会被压缩成几十行容器代码，所有列表项由JS根据数据自动生成。
• 新增或修改项目只需要在listData里调整，不用改动HTML结构。
• 事件委托替代了大量重复的onclick属性，代码更简洁易维护。

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