javascript - Javascript 代码在网络托管服务器上不起作用

Question

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

我尝试使用两个不同的免费网络主机，并且两者都出现了同样的问题。我还尝试运行开发人员工具（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是前端技术，它不在服务器上运行，但我真的不知道是什么原因造成的。我希望有人有类似的问题，因为我真的不知道会是什么。

标签： javascripthosting

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>