如何从JSON文件动态为slick-img-slider添加带项目描述的div元素

问题背景 #

我有一个以图片为主的网站，所有图片及项目列表均通过JavaScript从JSON文件动态加载生成。点击项目列表项时，想要显示对应项目的About描述字段，但因元素嵌入轮播组件，尝试添加后无法控制动态元素的显示/隐藏，没有效果。

相关代码如下：

动态生成项目列表的JS代码 #

function populateMenuList() {
    data.Projects.forEach(i => {
        var listElement = $(`<li class="list-item" id="project-${i.id}" data-sari="${i.data}">${i.Title}</li>`)
        listElement.on("click", () => {setProject(i)})
        $("#project-list").append(listElement);
    });
}

项目列表HTML结构 #

<nav class="saris nav-wrapper row horizontalList">
      <!-- PROJECT LIST FROM JSON DATA -->
<ul id="project-list" class="cursor-pointer projectList projects">
<li class="list-item" id="project-1" data-sari="1">Project_1</li>
<li class="list-item" id="project-2" data-sari="2">Project_2</li>
<li class="list-item show" id="project-3" data-sari="3">Project_3</li>
<li class="list-item" id="project-4" data-sari="4">Project_4</li>
<li class="list-item" id="project-5" data-sari="5">Other artworks</li>
</ul>
    </nav>

轮播区域HTML结构 #

<section class="content-wrapper">
      <div class="gallery-wrapper slideshow-container">
        <div>
          <img id="gallery" src="./assets/img/p1_img_1.jpg" alt="Gallery picture" />
        </div>
        <div>
          <img id="gallery" src="./assets/img/p2_img_1.jpg" alt="Gallery picture" />
        </div>
        <div>
          <img id="gallery" src="./assets/img/p3_img_1.jpg" alt="Gallery picture" />
        </div>
        <div>
          <img id="gallery" src="./assets/img/p4_img_1.jpg" alt="Gallery picture" />
        </div>
        <div>
          <img id="gallery" src="./assets/img/p5_img_1.jpg" alt="Gallery picture" />
        </div>
      </div>
      <div class="hidden buttonLeft" aria-label="Previous" onclick="plusSlides(-1)"></div>
      <div class="hidden buttonLeft" aria-label="Next" onclick="plusSlides(1)"></div>
    </section>

解决方案 #

1. 添加描述显示容器 #

在HTML的content-wrapper区域内新增一个专门用于展示项目描述的容器，默认设为隐藏：

<section class="content-wrapper">
  <div class="gallery-wrapper slideshow-container">...</div>
  <!-- 新增项目描述容器 -->
  <div id="project-description" class="project-description hidden"></div>
  <div class="hidden buttonLeft" aria-label="Previous" onclick="plusSlides(-1)"></div>
  <div class="hidden buttonLeft" aria-label="Next" onclick="plusSlides(1)"></div>
</section>

2. 扩展setProject函数控制描述显示 #

修改现有setProject函数，加入描述内容填充与显示逻辑：

function setProject(project) {
  // 保留原有轮播切换逻辑（如切换对应项目的图片组）
  
  // 填充并显示项目描述
  const descContainer = document.getElementById('project-description');
  descContainer.textContent = project.About;
  descContainer.classList.remove('hidden');
  
  // 可选：若需切换项目时隐藏其他描述，或同步轮播状态，可在此补充逻辑
}

若使用jQuery，代码可简化为：

function setProject(project) {
  // 保留原有轮播逻辑...
  
  $('#project-description').text(project.About).removeClass('hidden');
}

3. 优化动态元素事件绑定（可选） #

若之前事件绑定失效，改用事件委托绑定点击事件，确保动态生成的列表项能触发逻辑：

// 替换原有的逐元素绑定，改用父容器委托
$('#project-list').on('click', '.list-item', function() {
  const projectId = $(this).attr('id').replace('project-', '');
  const project = data.Projects.find(p => p.id == projectId);
  if (project) {
    setProject(project);
  }
});

4. 样式适配（可选） #

给描述容器添加样式，匹配页面风格：

.project-description {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius: 4px;
}
.hidden {
  display: none;
}

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