模态框多图片点击显示对应选中提示的低代码实现问题咨询

解决方案 #

调整后不需要针对单张图片编写单独样式，也不需要随图片数量变更修改JS逻辑，完全适配多场景复用需求： #

1. CSS调整

将提示元素的定位基准从全局改为单图父容器，统一所有提示的类名样式，避免单独设置边距：

/* 新增单图包裹容器，作为提示的定位基准 */
.img-item {
  position: relative;
  margin: 20px 5px;
  display: inline-block;
}
.img-thumbnail {
  width: 200px;
  display: block;
}
.img_description {
  display: none;
  background-color: rgb(0, 128, 68);
  color: #FFFFFF;
  font-size: 1.3em;
  text-align: center;
  position: absolute;
  /* 相对于父容器垂直居中显示，不用写固定margin */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  padding: 30px 0;
  z-index: 10;
}
.localizaciones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.img-thumbnail:hover {
  opacity: 1;
  transform: scale(1.1);
}

2. HTML调整

统一结构，把每张图片和对应的提示包裹在同个容器内，统一所有提示的类名，删除冗余的onclick属性：

<div id="central-bottom" class="modalDialog">
    <div>
        <a href="#close" title="Cerrar" class="close">X</a>
        <h1>选择对应的阴影图片：</h1>
        <div class="localizaciones">
            <div class="img-item">
                <img src="/images/lamina1/Dd24.gif" alt="对应中下部的位置" class="img-thumbnail" id="Dd24">
                <div class="img_description">你已选中此图片</div>
            </div>
            <div class="img-item">
                <img src="/images/lamina1/Dd32.gif" alt="对应中下部的位置" class="img-thumbnail" id="Dd32">
                <div class="img_description">你已选中此图片</div>
            </div>
            <div class="img-item">
                <img src="/images/lamina1/Dd34.gif" alt="对应中下部的位置" class="img-thumbnail" id="Dd34">
                <div class="img_description">你已选中此图片</div>
            </div>
            <div class="img-item">
                <img src="/images/lamina1/Dd28-DdS28.gif" alt="对应中下部的位置" class="img-thumbnail" id="Dd28-DdS28">
                <div class="img_description">你已选中此图片</div>
            </div>
        </div>
        <h3>如果没有匹配的图片，请点击<a href="drawingpad">链接</a>手动绘制</h3>
    </div>
</div>

3. JS调整

采用事件委托绑定点击事件，自动匹配当前点击图片对应的提示，不管图片数量多少都无需修改代码：

// 绑定父容器点击事件，自动适配所有新增图片
document.querySelector('.localizaciones').addEventListener('click', function(e) {
  // 仅点击图片时触发逻辑
  if (e.target.classList.contains('img-thumbnail')) {
    // 不需要单选效果可删除以下两行代码，支持同时选中多张图片
    document.querySelectorAll('.img_description').forEach(item => {
      item.style.display = 'none';
    })
    // 找到当前点击图片对应的提示并显示
    const currentTip = e.target.parentElement.querySelector('.img_description');
    currentTip.style.display = 'block';
  }
}, false)

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