首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 同一类的所有div'；S的模式窗口

我try 为php的关联数组中具有相同类的所有div创建一个模式窗口

使用关联数组，我显示了产品卡片，当我点击"More Detail"时，我想要得到一个带有产品描述的模式窗口

请帮帮我，我刚刚开始学习编程语言，可能我的代码有缺陷，对不起.

<div class="card">
  <div class="name"><?php echo $fish['name']; ?></div>
  <div class="price"><?php echo $fish['price']; ?></div>
  <button id="myBtn" class="button-intro">Подробнее</button>
  <div id="myModal" class="modal">
     <div class="modal-content">
         <div class="img-wrap"><img src="<?php echo $fish['img']; ?>"alt=""></div>
         <div class="wrapper-block">
             <div class="name-close">
                 <div class="name-block"><?php echo $fish['name']; ?></div>
                 <button id="close" class="btn-close">&times;</button>
             </div>
             <div class="description-shelf">
                 <div class="description-block"><p>Описание</p></div>
                 <div class="shelf-block"><p>Срок годности:<?php echo $fish['shelf']; ?></p></div>
             </div>
             <div class="description"><p><?php echo $fish['description']; ?></p></div>
         </div>
     </div>
  </div>
</div>

const mod = document.querySelectorAll('.modal');
const but = document.querySelectorAll('.button-intro');
const bclose = document.querySelectorAll('.btn-close');
but.onclick = () => {
    mod.style.display = "block";
}
bclose.onclick = () => {
    mod.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == mod) {
        mod.style.display = "none";
    }
}

我的数组中有6种产品，但当我单击按钮时，该功能只对一种产品起作用

推荐答案

您逻辑中的主要问题是，querySelectorAll()返回Collection个实体，而不是一个实体.因此，您需要遍历所有事件处理程序并单独附加事件处理程序.

此外，您还可以做其他几件事来提高代码质量:

  • 使用addEventListener()而不是onclick.后者是一个很容易被覆盖并导致意外问题的属性.
  • 从循环中创建的重复内容中删除id个属性.id必须是唯一的.
  • 您可以使用DOM遍历方法(如closest()和querySelector())将按钮与其各自的通道相关联.这样就不需要跟踪事件处理程序中的每个项索引.
  • 在可能的情况下，使用一个CSS类来更新元素的状态.

下面是一个进行了上述修改的工作示例:

const modals = document.querySelectorAll('.modal');
const introButtons = document.querySelectorAll('.button-intro');
const modalCloseButtons = document.querySelectorAll('.btn-close');

introButtons.forEach(btn => {
  btn.addEventListener('click', e => {
    e.stopPropagation();
    e.target.closest('.card').querySelector('.modal').classList.add('show');
  });
});

modalCloseButtons.forEach(btn => {
  btn.addEventListener('click', e => e.target.closest('.modal').classList.remove('show'));
});

document.addEventListener('click', e => {
  if (event.target.closest('.modal') == null) {
    modals.forEach(modal => modal.classList.remove('show'));
  }
});
.card {
  border-bottom: 2px dashed #CCC;
  margin: 0 0 20px;
}

.modal {
  display: none;
}
.modal.show {
  display: block; 
}
<div class="card">
  <div class="name">
    Fish name 1
  </div>
  <div class="price">
    Fish price 1
  </div>
  <button class="button-intro">Подробнее</button>
  <div class="modal">
    <div class="modal-content">
      <div class="img-wrap"><img src="<?php echo $fish['img']; ?>" alt=""></div>
      <div class="wrapper-block">
        <div class="name-close">
          <div class="name-block">
            Fish name 1
          </div>
          <button class="btn-close">&times;</button>
        </div>
        <div class="description-shelf">
          <div class="description-block">
            <p>Описание</p>
          </div>
          <div class="shelf-block">
            <p>Срок годности:
              Fish shelf 1
            </p>
          </div>
        </div>
        <div class="description">
          <p>
            Fish description 1
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="name">
    Fish name 2
  </div>
  <div class="price">
    Fish price 2
  </div>
  <button class="button-intro">Подробнее</button>
  <div class="modal">
    <div class="modal-content">
      <div class="img-wrap"><img src="<?php echo $fish['img']; ?>" alt=""></div>
      <div class="wrapper-block">
        <div class="name-close">
          <div class="name-block">
            Fish name 2
          </div>
          <button class="btn-close">&times;</button>
        </div>
        <div class="description-shelf">
          <div class="description-block">
            <p>Описание</p>
          </div>
          <div class="shelf-block">
            <p>Срок годности:
              Fish shelf 2
            </p>
          </div>
        </div>
        <div class="description">
          <p>
            Fish description 2
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="name">
    Fish name 3
  </div>
  <div class="price">
    Fish price 3
  </div>
  <button class="button-intro">Подробнее</button>
  <div class="modal">
    <div class="modal-content">
      <div class="img-wrap"><img src="<?php echo $fish['img']; ?>" alt=""></div>
      <div class="wrapper-block">
        <div class="name-close">
          <div class="name-block">
            Fish name 3
          </div>
          <button class="btn-close">&times;</button>
        </div>
        <div class="description-shelf">
          <div class="description-block">
            <p>Описание</p>
          </div>
          <div class="shelf-block">
            <p>Срок годности:
              Fish shelf 3
            </p>
          </div>
        </div>
        <div class="description">
          <p>
            Fish description 3
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript相关问答推荐

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何判断属于多个元素的属性是否具有多个值之一

django无法解析余数：[0] from carray[0]'

基于变量切换隐藏文本

在Angular中将样式应用于innerHTML

如何在Angular中插入动态组件

仅针对RTK查询中的未经授权的错误取消maxRetries

在286之后恢复轮询

无法读取未定义错误的属性路径名''

Websocket错误—有一个或多个保留位开启：reserved1 = 1，reserved2 = 0，reserved3 = 0

使用Promise.All并发解决时，每个promise 的线性时间增加？

如何在.NET Core中将chtml文件链接到Java脚本文件？

为什么云存储中的文件不能公开使用？

图表4-堆叠线和条形图之间的填充区域

如何使用Astro优化大图像？

ReferenceError：无法在初始化之前访问setData

我为什么要使用回调而不是等待？

表单数据中未定义的数组键

验证Java脚本函数中的两个变量

如何使用Angular JS双击按钮

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630