Question

我正在尝试实现多个模式，每个模式用于不同的部分。首先，我选择所有这些对象，并使用循环将功能应用于所有这些对象。你们可以在下面的代码中看到，我有树分隔模态。当我单击查看更多按钮时，我得到以下信息：Uncaught TypeError：无法读取HTMLParagraphElement上未定义的属性“ style”。在具有“ modal [i] .style.display”的每一行上。有人可以帮我吗？

我的计算机正文末尾有script标签。

var modal = document.getElementsByClassName('project-modal');
var button = document.getElementsByClassName('see-more');
var closeButton = document.getElementsByClassName('close-button');

for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    modal[i].style.display = 'block';
  });

  closeButton[i].addEventListener('click', function() {
    modal[i].style.display = 'none';
  });

  modal[i].addEventListener('click', function() {
    modal[i].style.display = 'none';
  });
}

.project-modal {
  display:none;
  position: fixed;
  z-index:1;
  left: 0;
  top:0;
  height: 100%;
  width:100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

  <head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class="see-more">See More</p>
<div class="project-modal">
    <span class="close-button">&times;</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    </p>
</div>

<p class="see-more">See More</p>
<div class="project-modal">
    <span class="close-button">&times;</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    </p>
</div>

<p class="see-more">See More</p>
<div class="project-modal">
    <span class="close-button">&times;</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    </p>
</div>
</body>

未捕获的TypeError：无法读取HTMLParagraphElement上未定义的属性'style'。<anonymous>（web.js：84）

0 个答案: