Question

正如标题所说，我在本地访问materialize css和js，从那里下载并且如果我清除了我的缓存和cookie然后从materialize.min.js中获取此错误，就会出现如下所示 picture here (click)

这是我的html和js代码。

$(document).ready(function(){
 	$('.slider').slider({full_width: true});

 	$('#btnLogin').click(function(){
 	 	postOrderID();
 	});
 	$('#loginPanel').click(function(){
 		$('#modalLogin').openModal();
 	})
        

function postOrderID() {
	var _pass = document.getElementById("txtPayment").value;
	var dataString = 'tablepass=' + _pass; //+ '&name=' + _name + '&pax=' + _pax + '&pass=' + _pass;
	if (_pass == '') {
		alert("Textbox null");
	} else {
		$.ajax({
		type: "POST",
		url: "php/getinsertOR.php",
		data: dataString,
		}).done(function(data){
			console.log(data);
	     	if (data == 'Success') {
           		window.location.replace("index.html");
	     	}else if (data == 'Failed'){
	     		alert("Wrong Password")
	     	}else if (data == 'Damage'){
				alert("Table Damaged")
	     	}else{
         		window.location.replace("index.html");
	     	}
			}).fail(function(){
				
		})
	}
		return false;
}

});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>
  </head>
<body>
  <div class="slider fullscreen">
    <ul class="slides">
      <li>
        <img src="images/a3.jpg"><!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
          <a id="loginPanel" class="waves-effect waves-light btn modal-trigger">Login</a>
        </div>
      </li>
      <li>
        <img src="images/a2.jpg"> <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="images/a1.jpg"><!-- random image -->
        <div class="caption right-align">
          <h3 class="light black-text text-lighten-1">Right Aligned Caption</h3>
          <h5 class="light black-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>

  </div>

    <!-- Modal Structure -->
  <div id="modalLogin" class="modal container">
    <div class="modal-content" style="text-align: center; padding-left: 20% ; padding-right: 20%">
      <label>Note: Confirmation Key is located at the table</label>
      <input id="txtPayment" type="text" id="tablepass" name="tablepass" placeholder="Enter Confirmation Key" style="text-align: center"> <br>
      <a id="btnLogin" class="waves-effect waves-light btn modal-trigger">Submit</a>
    </div>
  </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>              
<script src="js/loginController.js"></script>      
</body>

</html>

Answer 1

在我的电脑上完全正常。只需检查您是否在mozilla firefox中使用禁用 javascript，或使用其他浏览器运行该页面。它肯定会奏效。

为Mozilla Firefox启用JavaScript：单击“工具”下拉菜单，然后选择“选项”。选中阻止弹出窗口，自动加载图像和启用JavaScript旁边的框。通过右键单击页面上的任意位置并选择“重新加载”或使用工具栏中的“重新加载”按钮来刷新浏览器。

Materialize Slider Not Working即使已初始化，也会显示灰色屏幕

1 个答案: