Question

我有一个非常奇怪的问题。我网页上的Javascript代码无法正常运行。奇怪的是，当我在localhost（wamp）上运行页面时，一切正常运行，应该如此。当我将网页上传到虚拟主机时，问题开始，部分代码不起作用。应该调用弹出窗口的部分（div标签）根本不起作用。单击链接后，将不会发生任何事情。

我尝试使用两个不同的免费Web主机，并且两个主机上都出现了相同的问题。我还尝试了运行开发人员工具（F12），但是没有出现我所期望的错误，因为一切都可以在localhost上正常运行。
这是无效的特定代码。

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times</a>
     <a href="javascript:void(0)" id="myBtn">T1</a>
     <a href="javascript:void(0)" id="myBtn2">T2</a>
  <a href="javascript:void(0)" id="myBtn3">T3</a>
  <a href="javascript:void(0)" id="myBtn4">T4</a>
</div>

<script>    
  var modal = document.getElementById('myModal'); 
  var btn = document.getElementById("myBtn");   
  var span = document.getElementsByClassName("close")[0];     
  btn.onclick = function() {
    modal.style.display = "block";
  }
  span.onclick = function() {
    modal.style.display = "none";
  }
</script>
<script> 
  var modal2 = document.getElementById('myModal2');   
  var btn2 = document.getElementById("myBtn2");   
  var span2 = document.getElementsByClassName("close")[1];     
  btn2.onclick = function() {
    modal2.style.display = "block";
  }     
  span2.onclick = function() {
    modal2.style.display = "none";
  }    
</script>
<script> 
  var modal3 = document.getElementById('myModal3');
  var btn3 = document.getElementById("myBtn3");    
  var span3 = document.getElementsByClassName("close")[2];     
  btn3.onclick = function() {
    modal3.style.display = "block";
  }
  span3.onclick = function() {
    modal3.style.display = "none";
  }    
</script>
<script>    
  var modal4 = document.getElementById('myModal4');    
  var btn4 = document.getElementById("myBtn4");    
  var span4 = document.getElementsByClassName("close")[3];       
  btn4.onclick = function() {
    modal4.style.display = "block";
  }  
  span4.onclick = function() {
    modal4.style.display = "none";
  }   
</script>

我知道javascript是前端技术，并且它不能在服务器上运行，但是我真的不知道是什么原因造成的。我希望有人也遇到类似的问题，因为我真的不知道会是什么。

Answer 1

如果我们使用functions并传递一些参数，则可以简化很多代码。

此外，我们可以使用事件委托代替向每个对象添加侦听器，这对于动态HTML和重复元素结构非常有效。

请注意我们如何使用event.target测试matches。

我已经为演示模版模了样。

// First lets use a functions
const showModal = (modalId) => {
  const modal = document.querySelector(`#${modalId}`);
  modal.style.display = 'block';
};

const hideModal = (modalId) => {
  const modal = document.querySelector(`#${modalId}`);
  modal.style.display = 'none'; 
};

// Now lets listen for any click
document.addEventListener('click', (e) => {
  // Based on what was clicked we will do something.
  if(e.target.matches('.showmodal')) showModal(e.target.dataset.modal);
  
  if(e.target.matches('.close')) hideModal(e.target.parentNode.id);

});

.modal {
  margin-top: 25px;
  padding: 15px;
  color: white;
  background-color: blue;
  border-radius: 7px;
  display: none;
}

span.close {
  float: right;
  font-weight: bold;
}

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times</a>
     <a href="#" id="myBtn" class="showmodal" data-modal="myModal">T1</a>
     <a href="#" id="myBtn2" class="showmodal" data-modal="myModal2">T2</a>
  <a href="#" id="myBtn3" class="showmodal" data-modal="myModal3">T3</a>
  <a href="#" id="myBtn4" class="showmodal" data-modal="myModal4">T4</a>
</div>

<div id="myModal" class="modal">Modal 1 <span class="close">Close Me</span></div>
<div id="myModal2" class="modal">Modal 2 <span class="close">Close Me</span></div>
<div id="myModal3" class="modal">Modal 3 <span class="close">Close Me</span></div>
<div id="myModal4" class="modal">Modal 4 <span class="close">Close Me</span></div>

Answer 2

最多的问题是由window.onload=function()之类的函数造成的。如果还有另一个使用相同代码编码的Javascript，则它们将彼此等待直到永恒。

只需将javascript添加到网站底部，即正文之后。

您必须将代码放在head上，网站无法看到元素myModal2。

Javascript代码在Web托管服务器上不起作用

2 个答案: