Line: 151
Character: 6
Code: 0
Error Message: Expected identifier, string or number
该脚本在chrome,ff,opera中运行良好,但在ei 6,7和8中出现上述错误,甚至无法触发click事件。
编辑一个人指出有一个逗号,不需要在那里,所以我删除它并得到此错误
Line: 232
Character: 3
Code: 0
Error Message: Object doesn't support this property or method
以下是原始代码EDITED REMOVED Commas,如上所述
<?php
switch($_GET['size']){
case"3metre":
$panelwidth=75;
$panelheight=69;
break;
case"4metre":
$panelwidth=89;
$panelheight=69;
break;
};
$fourpanels = $panelwidth * 4;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- JS -->
<script type="text/javascript" src="plugins/validator/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugins/ui/jquery.effects.core.js"></script>
<!-- STYLES -->
<style>
<!-- LAYOUT -->
<!-- SKIRTS -->
.panelContainer{
height:128px;
width:900px;
float:left;
}
.endpanel{
width:<?php echo $panelwidth*2;?>px;
float:left;
height:118px;
background:#BFDDF2;
border:1px solid #7DB8DB;
}
.panel{
width:<?php echo $panelwidth*2;?>px;
bottom:0;
float:left;
height:118px;
background:#BFDDF2;
border:1px solid #7DB8DB;
}
.mid{
border-left:0px;
}
.door:hover{
width:<?php echo $panelwidth*2;?>px;
float:left;
height:118px;
background:#ECF5FB;
border:1px solid #fff;
}
.panelselected{
width:<?php echo $panelwidth*2;?>px;
float:left;
height:118px;
background:#ECF5FB;
border:1px solid #fff;
}
.container{
min-width:<?php echo $panelwidth*2;?>px;
width:auto;
float:left;
margin-top:3px;
height:7px;
}
.button{
width:7px; height:7px;
margin:3px;
}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div style="width:780px; height:80px;float:left;">
<h3>Please select a panel and customise the width and height to fit under your door step / doorway</h3>
<ul>
<li>Total Draught Skirt Width: <input type="text" disabled id="totalwidth" value="<?php echo $panelwidth*5;?>"/>(CMS) </li>
</ul>
</div>
<!-- CUSTOMISE DOOR -->
<div style="margin-top:20px; min-width:780px; height:80px;float:left;position:relative;">
<div class="endpanel" id="panel1">
<img src="images/draught-skirts/button.png" class="button left"/>
</div>
<div id="panel2" class="panel mid door">
</div>
<div id="panel3" class="panel mid door"></div>
<div id="panel4" class="panel mid door"></div>
<div class="endpanel mid" id="panel5">
<img src="images/draught-skirts/button.png" class="button right"/>
</div>
</div>
<div id="customisedoor" style="clear:both; margin-top:50px;width:400px; height:80px;float:left; display:none;">
<strong>Customise Your Door Panel</strong>
<table>
<tr>
<td>Width</td>
<td>
<input type="number" name="width" id="doorwidth" value="<?php echo $panelwidth;?>"/>(CMS)
</td>
</tr>
<tr>
<td>Height From Top of Skirt: </td>
<td>
<input type="number" name="height" id="doorheight" value="30"/>(CMS)
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="reset" value="Reset"/></td>
</tr>
</table>
</div>
<script type="text/javascript">
///////////
$("div.door").click(function () {
$("div.door").removeClass("panelselected");
$(this).toggleClass("panelselected");
selectedID = $(this).attr("id");
resetall();
alert("IDis"+selectedID);
$("#customisedoor").fadeIn("slow");
$("#"+selectedID).animate({
height: 118-Number($("#doorheight").val())*2+"px"
}, 200 );
height = 118-Number($("#doorheight").val())*2;
topmargin = Number($("#doorheight").val())*2;
$("#"+selectedID).css("margin-top", topmargin+"px");
////////////////////////////IF PANEL 2
if(selectedID === 'panel2'){
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
///////////////////////IF PANEL 3
if(selectedID === 'panel3'){
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
///////////////////////IF PANEL 3
if(selectedID === 'panel4'){
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
});
$("#doorwidth").keyup(function (){
$("#"+selectedID).animate({
width: Number($("#doorwidth").val())*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
$("#doorwidth").click(function (){
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
function calculateheight(){
$("#"+selectedID).animate({
height: 118-$("#doorheight").val()*2+"px"
}, 200 );
height = 118-$("#doorheight").val()*2;
topmargin = $("#doorheight").val()*2;
$("#"+selectedID).css("margin-top", topmargin+"px")
}
$("#doorheight").keyup(function (){
calculateheight();
});
$("#doorheight").click(function (){
calculateheight();
});
function resetall(){
$(".appended").remove();
$(".door").css({'width':'150','height':'118','margin':'0px'});
$(".door").removeClass("panelselected");
$("#doorheight").val(30);
$("#doorwidth").val(75);
$("#totalwidth").val(300+$("#doorwidth").val());
}
$("#reset").click(function () {
//alert("removed");
resetall();
});
//////////////////////////////////////////////////////////////////
$(function() {
//$( "#draggable" ).draggable({ axis: "y" });
//$( "#draggable2" ).draggable({ axis: "x" });
$( "#b2" ).draggable({ containment: "#bc2", scroll: false });
//$( "#draggable4" ).draggable({ containment: "#demo-frame" });
//$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</body>
</html>
来自IE的来源
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- JS -->
<script type="text/javascript" src="plugins/validator/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugins/ui/jquery.effects.core.js"></script>
<!-- STYLES -->
<style>
<!-- LAYOUT -->
<!-- SKIRTS -->
.panelContainer{
height:128px;
width:900px;
float:left;
}
.endpanel{
width:150px;
float:left;
height:118px;
background:#BFDDF2;
border:1px solid #7DB8DB;
}
.panel{
width:150px;
bottom:0;
float:left;
height:118px;
background:#BFDDF2;
border:1px solid #7DB8DB;
}
.mid{
border-left:0px;
}
.door:hover{
width:150px;
float:left;
height:118px;
background:#ECF5FB;
border:1px solid #fff;
}
.panelselected{
width:150px;
float:left;
height:118px;
background:#ECF5FB;
border:1px solid #fff;
}
.container{
min-width:150px;
width:auto;
float:left;
margin-top:3px;
height:7px;
}
.button{
width:7px; height:7px;
margin:3px;
}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div style="width:780px; height:80px;float:left;">
<h3>Please select a panel and customise the width and height to fit under your door step / doorway</h3>
<ul>
<li>Total Draught Skirt Width: <input type="text" disabled id="totalwidth" value="375"/>(CMS) </li>
</ul>
</div>
<!-- CUSTOMISE DOOR -->
<div style="margin-top:20px; min-width:780px; height:80px;float:left;position:relative;">
<div class="endpanel" id="panel1">
<img src="images/draught-skirts/button.png" class="button left"/>
</div>
<div id="panel2" class="panel mid door">
</div>
<div id="panel3" class="panel mid door"></div>
<div id="panel4" class="panel mid door"></div>
<div class="endpanel mid" id="panel5">
<img src="images/draught-skirts/button.png" class="button right"/>
</div>
</div>
<div id="customisedoor" style="clear:both; margin-top:50px;width:400px; height:80px;float:left; display:none;">
<strong>Customise Your Door Panel</strong>
<table>
<tr>
<td>Width</td>
<td>
<input type="number" name="width" id="doorwidth" value="75"/>(CMS)
</td>
</tr>
<tr>
<td>Height From Top of Skirt: </td>
<td>
<input type="number" name="height" id="doorheight" value="30"/>(CMS)
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="reset" value="Reset"/></td>
</tr>
</table>
</div>
<script type="text/javascript">
///////////
$("div.door").click(function () {
$("div.door").removeClass("panelselected");
$(this).toggleClass("panelselected");
selectedID = $(this).attr("id");
resetall();
alert("IDis"+selectedID);
$("#customisedoor").fadeIn("slow");
$("#"+selectedID).animate({
height: 118-Number($("#doorheight").val())*2+"px"
}, 200 );
height = 118-Number($("#doorheight").val())*2;
topmargin = Number($("#doorheight").val())*2;
$("#"+selectedID).css("margin-top", topmargin+"px");
////////////////////////////IF PANEL 2
if(selectedID === 'panel2'){
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
///////////////////////IF PANEL 3
if(selectedID === 'panel3'){
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
///////////////////////IF PANEL 3
if(selectedID === 'panel4'){
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
});
$("#doorwidth").keyup(function (){
$("#"+selectedID).animate({
width: Number($("#doorwidth").val())*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
$("#doorwidth").click(function (){
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
function calculateheight(){
$("#"+selectedID).animate({
height: 118-$("#doorheight").val()*2+"px"
}, 200 );
height = 118-$("#doorheight").val()*2;
topmargin = $("#doorheight").val()*2;
$("#"+selectedID).css("margin-top", topmargin+"px")
}
$("#doorheight").keyup(function (){
calculateheight();
});
$("#doorheight").click(function (){
calculateheight();
});
function resetall(){
$(".appended").remove();
$(".door").css({'width':'150','height':'118','margin':'0px'});
$(".door").removeClass("panelselected");
$("#doorheight").val(30);
$("#doorwidth").val(75);
$("#totalwidth").val(300+$("#doorwidth").val());
}
$("#reset").click(function () {
//alert("removed");
resetall();
});
//////////////////////////////////////////////////////////////////
$(function() {
//$( "#draggable" ).draggable({ axis: "y" });
//$( "#draggable2" ).draggable({ axis: "x" });
$( "#b2" ).draggable({ containment: "#bc2", scroll: false });
//$( "#draggable4" ).draggable({ containment: "#demo-frame" });
//$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</body>
</html>
答案 0 :(得分:2)
显然,第151行就是这个地方:
$("#"+selectedID).animate({
height: 118-Number($("#doorheight").val())*2+"px",
}, 200 );
注意第二行末尾有一个逗号。
此逗号位于对象的最后一个元素之后 - 并且在对象 1 的最后一项之后不能使用逗号:将其删除。
当然,你必须在你犯同样错误的其他地方做同样的修改 - 比如calculateheight()
函数。
1。 即使某些浏览器(如Firefox)没有引发错误。
答案 1 :(得分:1)
您应该将javascript代码包装在jQuery文档就绪事件中。虽然绑定可以在ready事件之外应用,但将它们放在内部将保证文档已准备好绑定自定义事件。这对于具有慢速javascript实现的浏览器尤其重要,例如Internet Explorer。
jQuery(document).ready(function($) {
// put all your javascript code here
});
答案 2 :(得分:0)
“px”之后的逗号不应该存在,它会导致IE抛出该错误:
$("#"+selectedID).animate({
height: 118-Number($("#doorheight").val())*2+"px",
}, 200 );
答案 3 :(得分:0)
这可能是IE的兼容性View问题。 步骤1:转到 - >工具 - >兼容性视图设置 清除所有复选框
第2步:转到 - >工具 - &gt;兼容性视图 撤消选择