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

Javascript SPAN不会在点击时关闭模式，尽管它们可以发送日志(log)等

我正在为一个学习项目网站创建模特儿.有几张卡，每一张都在点击时打开不同的模式，这是没有问题的.

当我点击modal_content以外的元素时，它工作得很好，但不是span个元素.

这是我的代码.我知道这里很乱，很抱歉.你能帮我解决这个问题吗？我期望span在点击时关闭我的modals，但它没有发生.

var modals = document.getElementsByClassName("card_modal");
var cards = document.getElementsByClassName("card");
var spans = document.getElementsByClassName("closeDiv");

for (let i = 0; i < spans.length; i++) {
  spans[i].onclick = function() {
    for (let i = 0; i < modals.length; i++) {
      console.log(i, modals[i].style.display)
      modals[i].style.display = "none";
      console.log(i, modals[i].style.display)
    }
  }
}

for (let i = 0; i < cards.length; i++) {
  cards[i].onclick = function() {
    modals[i].style.display = "block";
  }
}

window.onclick = function(event) {
  for (let i = 0; i < modals.length; i++) {
    if (event.target == modals[i]) {
      modals[i].style.display = "none";
    }
  }
}
<div class="card">
  <div class="card_top">
    <a class="card_image" href="#"> <img src="img/LOGO.jpg" alt="" /> </a>
  </div>
  <div class="card_bottom">
    <a href="" class="card_title">"x" Type beat</a>
    <div class="card_prices">
      <div class="card_price">1500</div>
    </div>
  </div>
  <div class="card_modal">
    <div class="modal_content">
      <span class="closeDiv">&times;</span>
      <p>modal 1</p>
    </div>
  </div>
</div>
<div class="card">
  <div class="card_top">
    <a class="card_image" href="#"> <img src="img/LOGO.jpg" alt="" /> </a>
  </div>
  <div class="card_bottom">
    <a href="" class="card_title">"x" Type beat</a>
    <div class="card_prices">
      <div class="card_price">1500</div>
    </div>
  </div>
  <div class="card_modal">
    <div class="modal_content">
      <span class="closeDiv">&times;</span>
      <p>modal 2</p>
    </div>
  </div>
</div>

提前谢谢您！

推荐答案

这个问题是因为span元素上的click事件正在传播到window元素上，所以click被两个单独的事件处理程序捕获，这两个事件处理程序显示/隐藏它，所以看起来什么都没有发生.

要解决此问题，您可以在单击span时触发的事件对象上调用stopPropagation():

spans[i].onclick = function(e) {
  e.stopPropagation();
  // your code...
}

以下是完整的工作版本:

var modals = document.getElementsByClassName("card_modal");
var cards = document.getElementsByClassName("card");
var spans = document.getElementsByClassName("closeDiv");

for (let i = 0; i < spans.length; i++) {
  spans[i].onclick = function(e) {
    e.stopPropagation();
    for (let i = 0; i < modals.length; i++) {
      modals[i].style.display = "none";
    }
  }
}

for (let i = 0; i < cards.length; i++) {
  cards[i].onclick = function() {
    modals[i].style.display = "block";
  }
}

window.onclick = function(event) {
  for (let i = 0; i < modals.length; i++) {
    if (event.target == modals[i]) {
      modals[i].style.display = "none";
    }
  }
}
.card_modal {
  display: none;
}
<div class="card">
  <div class="card_top">
    <a class="card_image" href="#"> <img src="img/LOGO.jpg" alt="" /> </a>
  </div>
  <div class="card_bottom">
    <a href="" class="card_title">"x" Type beat</a>
    <div class="card_prices">
      <div class="card_price">1500</div>
    </div>
  </div>
  <div class="card_modal">
    <div class="modal_content">
      <span class="closeDiv">&times;</span>
      <p>modal 1</p>
    </div>
  </div>
</div>
<div class="card">
  <div class="card_top">
    <a class="card_image" href="#"> <img src="img/LOGO.jpg" alt="" /> </a>
  </div>
  <div class="card_bottom">
    <a href="" class="card_title">"x" Type beat</a>
    <div class="card_prices">
      <div class="card_price">1500</div>
    </div>
  </div>
  <div class="card_modal">
    <div class="modal_content">
      <span class="closeDiv">&times;</span>
      <p>modal 2</p>
    </div>
  </div>
</div>

也就是说，您可以通过使用添加/删除的CSS类来显示/隐藏通道，以及使用DOM遍历方法将元素彼此关联，而不是使用任意索引来改进代码.以下是更新后的工作版本:

const modals = document.querySelectorAll(".card_modal");
const cards = document.querySelectorAll(".card");
const spans = document.querySelectorAll(".closeDiv");

// Show the related modal when clicking on the card
cards.forEach(card => {
  card.addEventListener('click', () => {
    card.querySelector('.card_modal').classList.add('show');
  });
});

// Hide the related modal when clicking the X span
spans.forEach(span => {
  span.addEventListener('click', e => {
    e.stopPropagation();
    span.closest('.card').querySelector('.card_modal').classList.remove('show');
  }); 
});

// Hide all modals when clicking out side a modal
document.addEventListener('click', e => {
  if (!e.target.closest('.card')) {
    modals.forEach(modal => modal.classList.remove('show'));
  }
})
.card_modal {
  display: none;
}

.card_modal.show {
  display: block;
}
<div class="card">
  <div class="card_top">
    <a class="card_image" href="#"> <img src="img/LOGO.jpg" alt="" /> </a>
  </div>
  <div class="card_bottom">
    <a href="" class="card_title">"x" Type beat</a>
    <div class="card_prices">
      <div class="card_price">1500</div>
    </div>
  </div>
  <div class="card_modal">
    <div class="modal_content">
      <span class="closeDiv">&times;</span>
      <p>modal 1</p>
    </div>
  </div>
</div>
<div class="card">
  <div class="card_top">
    <a class="card_image" href="#"> <img src="img/LOGO.jpg" alt="" /> </a>
  </div>
  <div class="card_bottom">
    <a href="" class="card_title">"x" Type beat</a>
    <div class="card_prices">
      <div class="card_price">1500</div>
    </div>
  </div>
  <div class="card_modal">
    <div class="modal_content">
      <span class="closeDiv">&times;</span>
      <p>modal 2</p>
    </div>
  </div>
</div>

Javascript相关问答推荐

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

如何在RTK上设置轮询，每24小时

如何用显示网格平滑地将元素从一个地方移动到另一个地方？

Redux查询多个数据库Api reducerPath&

React Code不在装载上渲染数据，但在渲染上工作

无法检测卡片重叠状态的问题

类构造函数不能在没有用With Router包装的情况下调用

本地库中的chartjs-4.4.2和chartjs-plugin-注解

环境值在.js文件/Next.js中不起作用

在Reaction中的handleSubmit按钮内，useSelector值仍然为空

在使用REACT更改了CSS类之后，无法更改CSS样式

NG/Express API路由处理程序停止工作

AJAX POST在控制器中返回空(ASP.NET MVC)

Next.js中的服务器端组件列表筛选

当我点击一个按钮后按回车键时，如何阻止它再次被点击

JavaScript将字符串数字转换为整数

如何在FiRestore中的事务中使用getCountFromServer

为什么在运行于<；img>；事件处理程序中的JavaScript中x和y是不可变的？

Played link-Initialize.js永远显示加载符号

如何动态呈现适合未知屏幕大小的最大数量的表行？苗条的

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

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