2013-07-31 74 views
0

我试图实现一个jQuery滑块,它绑定到选择框,作为我放在一起的调查问卷的一部分。但是,我在Chrome中获取了未捕获的SyntaxError,并且在IE中出现预期的')'错误。jQuery UI错误 - 未捕获的SyntaxError:意外标识符

我使用的jQuery是如下,是从jQuery UI的现场直副本中找到here

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
    var select = $(".minbeds"); 
    var slider = $("<div id="slider"></div>").insertAfter(select).slider({ 
     min: 1, 
     max: 4, 
     range: "min", 
     value: select[ 0 ].selectedIndex + 1, 
     slide: function(event, ui) { 
     select[ 0 ].selectedIndex = ui.value - 1; 
     } 
    }); 

    $(".minbeds").change(function() { 
     slider.slider("value", this.selectedIndex + 1); 
    }); 
    }); 
</script> 

只有改变我对代码所做的是,我已经改变了# minbeds和ID到一个类(.minbeds)。

的HTML如下:

<select class="minbeds"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
    </select> 

现在,代码似乎做工精细,用我的本地机器上没有错误,但是当我把它变成一个CMS,我得到一个未捕获语法错误:意外的标识符下面的行之间误差(以铬):

var slider = $("<div id="slider"></div>").insertAfter(select).slider({ 

min: 1, 

在IE9中,我得到预期“)”其中,星号表示这里:

var slider = $("<div id="*slider"></div>").insertAfter(select).slider({ 

没有人有任何想法,为什么这可能发生?有关如何缩小错误的想法?我试过使用JSLint,但我不知道如何正确使用它。

这里是CMS的完整的源代码,如果有帮助:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="head"><title> 
test | Gael Ltd 
</title><meta charset="UTF-8" /> 
<link href="/CMSPages/GetCSS.aspx?stylesheetname=GaelCorporate" type="text/css" rel="stylesheet" /> 
<link href="/App_Themes/Default/DesignMode.css" type="text/css" rel="stylesheet" /> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 

    var select = $(".minbeds"); 
    var slider = $("<div id="slider"></div>").insertAfter(select).slider({ 
     min: 1, 
     max: 4, 
     range: "min", 
     value: select[ 0 ].selectedIndex + 1, 
     slide: function(event, ui) { 
     select[ 0 ].selectedIndex = ui.value - 1; 
     } 
    }); 
    $(".minbeds").change(function() { 
     slider.slider("value", this.selectedIndex + 1); 
    }); 
    }); 
</script> 
<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" /> 
<link href="/favicon.ico" type="image/x-icon" rel="icon" /> 
<link href="/App_Themes/GaelCorporate/site_superfish.css" type="text/css" rel="stylesheet" /> 
<link href="/App_Themes/GaelCorporate/superfish.css" type="text/css" rel="stylesheet" /> 
</head> 

<body class="LTR IE IE9 ENGB ContentBody"> 
<form method="post" action="/test-folder/test.aspx" id="form"> 

<div class="aspNetHidden"> 
    <input type="hidden" name="manScript_HiddenField" id="manScript_HiddenField" value="" /> 
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
    var theForm = document.forms['form']; 
    if (!theForm) { 
     theForm = document.form; 
    } 
function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
     theForm.__EVENTTARGET.value = eventTarget; 
     theForm.__EVENTARGUMENT.value = eventArgument; 
     theForm.submit(); 
    } 
} 
//]]> 
</script> 


<script src="/WebResource.axd?d=jPoMVS0EaQHOPmIi_xm2HU7yLiOSI9SwD_nAvxdPGg3slCV5HIxf7PSCa8BfM4b35NfjJ4LD1KDvV9zGMhi-uyAc4R1j13kmLSk37dPSwRA1&amp;t=635080272185083230" type="text/javascript"></script> 

<input type="hidden" name="lng" id="lng" value="en-GB" /><div> 
<input type="hidden" name="vmode" id="vmode" value="2" /> 
</div> 

<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fcmsedit.js" type="text/javascript"></script> 
<script src="/ScriptResource.axd?d=qITU4oF4GWOpdURxveOn4klAk_JXip46ZHYKRqOUaPkNBV9OLAT0zMmPuZjF0ltSZKQlH5lCAk6I-L0CB4BfF84f5lbs5uiDmHRHcZEufPBw7X-M84RuYSjEXgjwE-gx0&amp;t=34d147fd" type="text/javascript"></script> 
<script src="/ScriptResource.axd?d=05xl_ew97J9D2HSa4Uccwf9-hvRXKd018osO5VbhpBA71UbuP-EbmT7rx4i0SCEzVoF8fX63gNR8y-mVT88Ca0QEYuqmsHW4GGpDjGvljtfyIoQXInytcQQGxUI7XAD5x4baeNOY1cVoynUnafwICw2&amp;t=34d147fd" type="text/javascript"></script> 

<div class="aspNetHidden"> 
<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" /> 
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" /> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
    Sys.WebForms.PageRequestManager._initialize('manScript', 'form', [], [], [], 90, ''); 
//]]> 
</script> 

<div id="m" style="background:none;"> 
<div id="CMSHeaderDiv"> 
    <div id="m_PageManagerInfoContainer" class="PageManagerInfoContainer"> 
     <!-- --><div id="m_pnlPreviewInfo" class="PageManagerPreviewInfo"> 
      <span class="PreviewInfo">This is a preview mode of document <strong>test</strong>.</span><a class="PreviewInfoLink" href="javascript:__doPostBack(&#39;m$ctl02&#39;,&#39;&#39;)">Close</a><span class="PreviewInfo">the preview mode.</span> 
      </div> 
    </div> 

<script type="text/javascript"> 
    //<![CDATA[ 
    if ((parent != null) && (parent.IsCMSDesk)) { infoElem = document.getElementById('m_pnlPreviewInfo'); if (infoElem) {if (infoElem.style) { infoElem.style.display = 'none'; } else { infoElem.display = 'none'; } }} 
//]]> 
</script><!-- --> 
</div> 
</div> 

<div id="pagewrapper"> 
    <!-- vertical_menu div start --> 
<div id="vertical_menu"> 


</div><!-- vertical_menu div end --> 

<!-- content_container div start --> 
<div id="content_container"> 
<div id="zoneContent"> 
    <div id="p_lt_zoneContent_BizForm_viewBiz"> 
<div id="p_lt_zoneContent_BizForm_viewBiz_ctl00"> 
    <div id="p_lt_zoneContent_BizForm_viewBiz_ctl00_pnlForm" class="FormPanel" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;p_lt_zoneContent_BizForm_viewBiz_ctl00_btnOK&#39;)"> 
     <table class="EditingFormTable"><tr><td class="EditingFormLabelCell"><label id="p_lt_zoneContent_BizForm_viewBiz_ctl00_select_lb" class="EditingFormLabel" for="p_lt_zoneContent_BizForm_viewBiz_ctl00_select_dropDownList">select field</label></td><td class="EditingFormValueCell"><div class="EditingFormControlNestedControl"> 

<select name="p$lt$zoneContent$BizForm$viewBiz$ctl00$select$dropDownList" id="p_lt_zoneContent_BizForm_viewBiz_ctl00_select_dropDownList" class="minbeds"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
</select> 

</div></td></tr><tr> 

<td class="EditingFormButtonLeftCell"></td> 
<td class="EditingFormButtonCell"> 
    <input type="submit" name="p$lt$zoneContent$BizForm$viewBiz$ctl00$btnOK" value="OK" id="p_lt_zoneContent_BizForm_viewBiz_ctl00_btnOK" class="FormButton" /> 
    </td></tr></table> 
    </div> 
</div> 
</div> 

<select name="minbeds" class="selectInput"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 
</div> 

<div class="bottomWebParts"></div> 

</div> 
<!-- content_container div end --> 

<!-- primary webparts div start --> 
<div id="primary_webparts"></div> 

<!-- primary webparts div end --> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
    (function() {var fn = function() {$get("manScript_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]> 
</script> 

<script type="text/javascript"> 
    //<![CDATA[ 
    InitializePage(); 
    //]]> 
</script> 

<script type="text/javascript"> 
    //<![CDATA[ 
    theForm.oldSubmit = theForm.submit; 
    theForm.submit = WebForm_SaveScrollPositionSubmit; 

    theForm.oldOnSubmit = theForm.onsubmit; 
    theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit; 
    //]]> 
</script> 

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTYwODg0MzQ2Ng9kFgICARBkZBYCAgMPZBYCZg9kFgJmD2QWAgIDD2QWAmYPZBYCZg8PFgIeCEZvcm1Nb2RlCyl1Q01TLkZvcm1FbmdpbmUuRm9ybU1vZGVFbnVtLCBDTVMuRm9ybUVuZ2luZSwgVmVyc2lvbj02LjAuNDcxMy4yNzkyNiwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj04MzRiMTJhMjU4ZjIxM2Y5AGQWAgICD2QWAmYPZBYEAgEPDxYCHgdWaXNpYmxlaGQWAgIBDw8WBB4IQ3NzQ2xhc3MFH0VkaXRpbmdGb3JtQ29udHJvbE5lc3RlZENvbnRyb2weBF8hU0ICAmQWAmYPZBYCZg8PFgQfAgUKTGFiZWxGaWVsZB8DAgJkZAIHD2QWAgIBDw8WBB8CBR9FZGl0aW5nRm9ybUNvbnRyb2xOZXN0ZWRDb250cm9sHwMCAmQWAmYPDxYCHwJkZBYCZg8QDxYEHwIFB21pbmJlZHMfAwICZA8WBGYCAQICAgMWBBAFATEFATFnEAUBMgUBMmcQBQEzBQEzZxAFATQFATRnZGRkpyri0ouEXB8y3l0reZFw/5xfESlKtjr/PsCd4HT+bG4=" /> 
<script type="text/javascript"> 
    //<![CDATA[ 
    if (window.WebForm_InitCallback) { 
    __theFormPostData = ''; 
    __theFormPostCollection = new Array(); 
    window.WebForm_InitCallback(); 
    } 
    //]]> 
</script> 
</form> 

</body> 
</html> 

回答

1

试试这个

var slider = $('<div id="slider"></div>').insertAfter(select).slider({ 
+0

这工作,谢谢!任何想法为什么最初的代码在我的本地机器上工作,而不是在线? – fnkymnky

+0

不完全一样,但是每当字符串内有字符串时,最好像这样放置''“',浏览器不会抛出解析错误......请看这里http://www.w3.org/TR/css3-值/#分量类型 – Akki619

2

尝试像

var slider = $("<div id='*slider'></div>").insertAfter(select).slider({ 

,或者直接就可以像

var slider = $("div #slider").insertAfter(select).slider({ 

,我想你需要将select放在单引号或双引号中。

相关问题