JQUERY IE 7,8 错误消息：预期的标识符、字符串或数字答案

【问题标题】：JQUERY IE 7,8 Error Message: Expected identifier, string or numberJQUERY IE 7,8 错误消息：预期的标识符、字符串或数字
【发布时间】：2012-08-18 21:18:18
【问题描述】：

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>

【问题讨论】：

您能否发布您浏览器的源输出，以便我们交叉检查行号？
您不应该在变量前加上var 吗？例如var selectedID = $(this).attr("id");

标签： php jquery internet-explorer-7 internet-explorer-6

【解决方案1】：

显然，第 151 行就在这附近：

$("#"+selectedID).animate({
    height: 118-Number($("#doorheight").val())*2+"px",

}, 200 );

注意第二行末尾有一个逗号。

这个逗号在对象的最后一个元素之后——你不能在对象的最后一个元素之后有逗号¹：删除它。

当然，您将不得不在您犯相同错误的其他一些地方进行相同的修改，例如在calculateheight() 函数中。

^1._{即使某些浏览器，例如 Firefox，也不会引发错误。}

【讨论】：

【解决方案2】：

您真的应该将您的 javascript 代码包装在一个 jQuery 文档就绪事件中。虽然绑定可以在 ready 事件之外应用，但将它们放在内部将保证文档已准备好绑定自定义事件。这对于 javascript 实现速度较慢的浏览器尤其重要，例如 Internet Explorer。

jQuery(document).ready(function($) {
  // put all your javascript code here
});

【讨论】：

查看编辑后的帖子，我将代码包装在 jquery doc 中准备就绪，它现在可以工作，但是我仍然收到此错误行：152 字符：6 代码：0 错误消息：对象不支持此属性或方法
我会注释掉或删除所有 javascript 代码，看看错误消息是否消失。然后一次添加代码块，直到收到错误消息，现在我们知道哪个代码块是罪魁祸首。如果您可以在此处发布，我可能会提供更多帮助，但我现在手头没有我的 Windows 虚拟机...

【解决方案3】：

这可能是 IE 的兼容性视图问题。 step1：转到->工具->兼容性视图设置清除所有复选框

step2: Goto->Tool->Compatibility View 撤消选择

【讨论】：

【解决方案4】：

“px”后面的逗号不应该在那里，它会导致 IE 抛出该错误：

$("#"+selectedID).animate({
    height: 118-Number($("#doorheight").val())*2+"px",
}, 200 );

【讨论】：