配置加载更多按钮：实现点击加载40个id为dreamz的div

嘿，我来帮你搞定这个「加载更多」的需求！先提个关键小提醒：HTML里id是唯一标识，不能给40个div都用id="dreamz"，所以我把重复的id都改成class啦，这样才符合网页规范~

1. 基础HTML结构 #

先准备好承载内容的容器和加载按钮：

<!-- 用来放所有dreamz元素的容器 -->
<div id="dreamz-container"></div>
<!-- 加载更多按钮 -->
<button id="load-more-btn">加载更多</button>

2. 原生JavaScript实现逻辑 #

我们用原生JS来实现核心功能：监听按钮点击，每次点击生成指定结构的元素，直到加载满40个：

// 已加载的元素数量
let loadedNum = 0;
// 目标加载总数
const totalTarget = 40;
// 获取页面元素
const container = document.getElementById('dreamz-container');
const loadBtn = document.getElementById('load-more-btn');

// 生成单个dreamz结构元素的函数
function createDreamzItem() {
  // 创建外层div（用class代替重复id）
  const dreamzDiv = document.createElement('div');
  dreamzDiv.className = 'dreamz';

  // 创建折叠按钮
  const accordionBtn = document.createElement('button');
  accordionBtn.className = 'accordion borderz';
  accordionBtn.innerHTML = 'The lunar light<a>2018.12.09</a>';

  // 创建面板区域
  const panelzDiv = document.createElement('div');
  panelzDiv.className = 'panelz';

  // 创建表格内容
  const table = document.createElement('table');
  table.innerHTML = `
    <th width="50%">
      <img src="assets/images/dream.jpg" width="100%"/>
    </th>
    <th class="descrip" style="vertical-align: top;" width="50%">
      <p>This is the description</p>
    </th>
  `;

  // 组装所有元素
  panelzDiv.appendChild(table);
  dreamzDiv.appendChild(accordionBtn);
  dreamzDiv.appendChild(panelzDiv);

  return dreamzDiv;
}

// 加载更多的核心逻辑
function loadMoreItems() {
  // 计算本次可加载的数量（避免最后一次超过总数）
  const loadCount = Math.min(totalTarget - loadedNum, 1); // 这里默认每次加载1个，你可以改成5/10批量加载
  for (let i = 0; i < loadCount; i++) {
    const newItem = createDreamzItem();
    container.appendChild(newItem);
    loadedNum++;
  }

  // 加载满40个后更新按钮状态
  if (loadedNum >= totalTarget) {
    loadBtn.disabled = true;
    loadBtn.textContent = '已全部加载完成';
  }
}

// 给按钮绑定点击事件
loadBtn.addEventListener('click', loadMoreItems);

// 可选：页面初始化时先加载几个元素（比如先加载5个）
window.addEventListener('DOMContentLoaded', () => {
  for (let i = 0; i < 5; i++) {
    if (loadedNum >= totalTarget) break;
    loadMoreItems();
  }
});

3. 关键细节说明 #

• id唯一性修正：把重复的id="dreamz"和id="borderz"改成class，避免DOM选择器出错，同时符合HTML规范。
• 批量加载优化：如果觉得每次加载1个太慢，把loadCount里的1改成5或10，就能实现批量加载。
• 按钮状态管理：加载完成后禁用按钮并修改文字，防止用户重复点击。
• 图片路径检查：确保assets/images/dream.jpg是正确的相对路径，不然图片会加载失败。

4. 可选：折叠面板样式补充 #

如果需要实现按钮点击展开/收起面板的效果，加一点CSS就行：

.panelz {
  display: none;
  padding: 12px;
  background-color: #f9f9f9;
}
.accordion.active + .panelz {
  display: block;
}
.accordion {
  width: 100%;
  padding: 16px;
  background-color: #eee;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s;
}
.accordion:hover {
  background-color: #ddd;
}
.accordion a {
  float: right;
  color: #666;
}

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