为什么 querySelector 只选择第一个元素，我该如何解决这个问题? [英] Why does querySelector only select the first element and how can I fix this?

查看：27 发布时间：2021/9/23 19:24:16 javascript html css

本文介绍了为什么 querySelector 只选择第一个元素，我该如何解决这个问题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试制作一个日历，当我单击其中一个日期时，会弹出一个您必须填写的表格.我无法使其正常工作.我唯一能上班的就是第一个1"约会.其他一切都不起作用，我不知道如何解决它.我试过重写代码并切换到 id，但没有任何效果.任何帮助表示赞赏.谢谢！

document.querySelector(".weekdays").addEventListener("click",功能() {document.querySelector(".bg-modal").style.display = "flex";});

.bg-modal {宽度:100%；背景颜色:rgba(0, 0, 0, .7);高度:100vh；位置:固定；z-索引:20；显示:无；}.modal-content {宽度:30%；高度:50%；位置:绝对；顶部:50%；边框半径:30px；背景:线性渐变(到底部，#2ad6ff，#0069ff)；}.modal-heading {宽度:70%；高度:50px；位置:绝对；边框半径:50px；背景色:#2ad6ff；左:50%；变换:翻译(-50%)；顶部:-6%；字体大小:32px；文本对齐:居中；白颜色;}.modal-close {位置:绝对；变换:旋转(45度)；字体大小:42px；白颜色;顶部:-1%；左:95%；;光标:指针；高度:10%；}.modal-输入{高度:70%；边界:无；大纲:无；边框半径:20px；左边距:15px；字体大小:15px；右边距:32px；}.modal-textarea {边距:20px；高度:150px；边框半径:20px；边界:无；调整大小:无；字体大小:15px；填充左:3%；填充顶部:2%；}.modal-提交{宽度:30%；位置:绝对；左:47%；顶部:85%；变换:translateX(-50%);背景颜色:白色；大纲:无；边界:无；字体大小:30px；边框半径:20px；颜色:黑色;}.modal-submit:active {最高:86%；}.modal-form {显示:网格；网格模板列:1fr；网格模板行:1fr 1fr 1fr 1fr；}.calander {显示:网格；网格模板列:1fr 1fr 1fr 1fr 1fr 1fr 1fr；网格模板行:1fr 1fr 1fr 1fr 1fr 1fr；网格列间距:20px；网格行距:20px；justify-items:拉伸；对齐项目:拉伸；宽度:40%；高度:50%；字体大小:32px；文本对齐:居中；左:50%；位置:绝对；变换:翻译(-50%)；}.周末 {字体大小:45px；}.工作日{字体粗细:200；过渡:.5s；背景:无；边界:无；字体大小:40px；}.工作日:悬停{变换:比例(1.3)；过渡:.5s；}


<div class="modal-content center"><div class="modal-heading">填写下面的表格</div><form class="modal-form" action=""><input class="modal-input" type="text" placeholder="Name"><input class="modal-input" type="text" placeholder="Email"><input class="modal-input" type="text" placeholder="电话号码"><input class="modal-input" type="text" placeholder="公司名称"><textarea class="modal-textarea" placeholder="我们能为您提供什么帮助?"></textarea><input class="modal-submit" type="submit"></表单><div class="modal-close">+</div>

https://codepen.io/pokyparachute66/pen/vPyrEv

解决方案

使用 querySelectorAll 而不是它会返回一个节点列表.然后，您必须迭代并附加事件处理程序.

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",() =>{document.querySelector(".bg-modal").style.display = "flex";}));

I am trying to make a calendar where when I click on one of the dates, a form pops up that you have to fill in. I cannot get this to work correctly. The only one I can get to work is the very first "1" date. Everything else does not work and I don't know how to fix it. I have tried rewriting the code and switching to id's, but nothing will work. Any help is appreciated. Thanks!

document.querySelector(".weekdays").addEventListener("click",
  function() {
    document.querySelector(".bg-modal").style.display = "flex";
  });

.bg-modal {
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  height: 100vh;
  position: fixed;
  z-index: 20;
  display: none;
}

.modal-content {
  width: 30%;
  height: 50%;
  position: absolute;
  top: 50%;
  border-radius: 30px;
  background: linear-gradient(to bottom, #2ad6ff, #0069ff);
}

.modal-heading {
  width: 70%;
  height: 50px;
  position: absolute;
  border-radius: 50px;
  background-color: #2ad6ff;
  left: 50%;
  transform: translate(-50%);
  top: -6%;
  font-size: 32px;
  text-align: center;
  color: white;
}

.modal-close {
  position: absolute;
  transform: rotate(45deg);
  font-size: 42px;
  color: white;
  top: -1%;
  left: 95%;
  ;
  cursor: pointer;
  height: 10%;
}

.modal-input {
  height: 70%;
  border: none;
  outline: none;
  border-radius: 20px;
  padding-left: 15px;
  font-size: 15px;
  margin-right: 32px;
}

.modal-textarea {
  margin: 20px;
  height: 150px;
  border-radius: 20px;
  border: none;
  resize: none;
  font-size: 15px;
  padding-left: 3%;
  padding-top: 2%;
}

.modal-submit {
  width: 30%;
  position: absolute;
  left: 47%;
  top: 85%;
  transform: translateX(-50%);
  background-color: white;
  outline: none;
  border: none;
  font-size: 30px;
  border-radius: 20px;
  color: black;
}

.modal-submit:active {
  top: 86%;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.calander {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
  width: 40%;
  height: 50%;
  font-size: 32px;
  text-align: center;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
}

.weekend {
  font-size: 45px;
}

.weekdays {
  font-weight: 200;
  transition: .5s;
  background: none;
  border: none;
  font-size: 40px;
}

.weekdays:hover {
  transform: scale(1.3);
  transition: .5s;
}

<div class="bg-modal">
  <div class="modal-content center">
    <div class="modal-heading">Complete the form below</div>
    <form class="modal-form" action="">
      <input class="modal-input" type="text" placeholder="Name">
      <input class="modal-input" type="text" placeholder="Email">
      <input class="modal-input" type="text" placeholder="Phone Number">
      <input class="modal-input" type="text" placeholder="Company Name">
      <textarea class="modal-textarea" placeholder="What can we help you with?"></textarea>
      <input class="modal-submit" type="submit">
    </form>
    <div class="modal-close">+</div>
  </div>
</div>


<div class="calander">
  <div class="weekend">S</div>
  <div class="weekend">M</div>
  <div class="weekend">T</div>
  <div class="weekend">W</div>
  <div class="weekend">T</div>
  <div class="weekend">F</div>
  <div class="weekend">S</div>
  <div></div>
  <div></div>
  <button type="button" class="weekdays"><div class="weekdays">1</div></button>
  <button type="button" class="weekdays"><div class="weekdays">2</div></button>
  <button type="button" class="weekdays"><div class="weekdays">2</div></button>
  <button type="button" class="weekdays"><div class="weekdays">3</div></button>
  <button type="button" class="weekdays"><div class="weekdays">4</div></button>
  <button type="button" class="weekdays"><div class="weekdays">5</div></button>
  <button type="button" class="weekdays"><div class="weekdays">6</div></button>
  <button type="button" class="weekdays"><div class="weekdays">7</div></button>
  <button type="button" class="weekdays"><div class="weekdays">8</div></button>
  <button type="button" class="weekdays"><div class="weekdays">9</div></button>
  <button type="button" class="weekdays"><div class="weekdays">10</div></button>
  <button type="button" class="weekdays"><div class="weekdays">11</div></button>
  <button type="button" class="weekdays"><div class="weekdays">12</div></button>
  <button type="button" class="weekdays"><div class="weekdays">13</div></button>
  <button type="button" class="weekdays"><div class="weekdays">14</div></button>
  <button type="button" class="weekdays"><div class="weekdays">15</div></button>
  <button type="button" class="weekdays"><div class="weekdays">16</div></button>
  <button type="button" class="weekdays"><div class="weekdays">17</div></button>
  <button type="button" class="weekdays"><div class="weekdays">18</div></button>
  <button type="button" class="weekdays"><div class="weekdays">19</div></button>
  <button type="button" class="weekdays"><div class="weekdays">20</div></button>
  <button type="button" class="weekdays"><div class="weekdays">21</div></button>
  <button type="button" class="weekdays"><div class="weekdays">22</div></button>
  <button type="button" class="weekdays"><div class="weekdays">23</div></button>
  <button type="button" class="weekdays"><div class="weekdays">24</div></button>
  <button type="button" class="weekdays"><div class="weekdays">25</div></button>
  <button type="button" class="weekdays"><div class="weekdays">26</div></button>
  <button type="button" class="weekdays"><div class="weekdays">27</div></button>
  <button type="button" class="weekdays"><div class="weekdays">28</div></button>
  <button type="button" class="weekdays"><div class="weekdays">29</div></button>
  <button type="button" class="weekdays"><div class="weekdays">30</div></button>
  <button type="button" class="weekdays"><div class="weekdays">31</div></button>

</div>

https://codepen.io/pokyparachute66/pen/vPyrEv

解决方案

Use querySelectorAll instead which would return you a list of node. You then have to iterate over then and attach the event handlers.

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
 () => {
    document.querySelector(".bg-modal").style.display = "flex";
  }));

这篇关于为什么 querySelector 只选择第一个元素，我该如何解决这个问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么 querySelector 只选择第一个元素，我该如何解决这个问题? [英] Why does querySelector only select the first element and how can I fix this?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么 querySelector 只选择第一个元素，我该如何解决这个问题? [英] Why does querySelector only select the first element and how can I fix this?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭