2013-09-03 5 views
-1

html 페이지의 요소 id를 jquery 함수에 전달하려고합니다. 은 쉽게 들리지만 어떤 이유로 작동하지 않습니다.
이 코드 조각 파일에 이름 func.js javascript에서 전달할 요소 id가

function getGauge(gname){ 

    var labels = { visible: true, position: 'inside' }, 
    theme = getDemoTheme(); 
    //Create jqxGauge 
    $('#'+gname).jqxGauge({ 
     width:'200px', height:'200px', 
     ranges: [{ startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, 
       { startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, 
       { startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, 
       { startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 } 
     ], 
     cap: { radius: 0.04 }, 
     caption: { offset: [0, 0], value: 'jQWidgets', position: 'bottom' }, 
     value: 0, 
     style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' }, 
     animationDuration: 1500, 
     colorScheme: 'scheme04', 
     labels: labels, 
     ticksMinor: { interval: 5, size: '5%' }, 
     ticksMajor: { interval: 10, size: '10%' } 
    }); 

    // set gname's value. 
    $('#'+gname).jqxGauge('setValue', 39); 



}; 

코드의이 작품은 내 HTML 파일입니다

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta name="keywords" content="jQuery Gauge, Gauge Widget, Radial Gauge" /> 
     <meta name="description" content="Using the toolbox in the right hand side of the jqxGauge you can easy switch through different properties which are changing gauge's appearance." /> 
     <title id='Description'>This sample demonstrates the basic Gauge settings.</title> 
     <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> 
     <script type="text/javascript" src="../scripts/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript" src="../scripts/gettheme.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxchart.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> 
     <script type="text/javascript" src="../jqwidgets/jqxexpander.js"></script> 
     <script type="text/javascript" src="./func.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       getGauge("gauge"); 
       ); { 

     </script> 
    </head> 
    <body class='default'> 
     <div class="demo-gauge" style="width: 600px;"> 
      <div id="gauge" style="float: left;"></div> 
      <div id="expander" style="float: right;"> 
       <div> 
        Options 
       </div> 
       <div> 
        <ul style="list-style: none; padding: 0px; margin: 10px;"> 
         <li style="padding: 3px; font-family: Verdana; font-size: 12px;"> 
          <div id="showLabelsCheckbox">Show labels</div> 
          <ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px;"> 
           <li> 
            <div id="insideRadio">Inside the gauge</div> 
           </li> 
           <li> 
            <div style="margin-top: 5px;" id="outsideRadio">Outside the gauge</div> 
           </li> 
          </ul> 
         </li> 
         <li style="padding: 3px; font-family: Verdana; font-size: 12px;"> 
          <div id="showRangesCheckbox">Show ranges</div> 
         </li> 
         <li style="padding: 3px; font-family: Verdana; font-size: 12px;"> 
          <div id="showBorderCheckbox">Show border</div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
    </html> 

나는, 이것에 대한 쉬운 대답은있을거야 그냥 같이한다, 그들은 코멘트에 말했듯이
도움이

+1

당신이 당신의 HTML에서 JS 코드에서 구문 오류를 발견 했습니까? '); {' –

+0

네.'.ready' 함수에 에러가 있습니다. – Rodik

+0

맞습니다. 이 바뀌 었습니다. 이제는 잘 작동합니다. 바보 같은 실수를했습니다 ... –

답변

1

을 감상 할 수있다 찾을 수 없습니다 :

$(document).ready(function(){ 
    getGauge("gauge"); 
}); 
0

이 시도 :

$(document).ready(function(){ 
    var gauge = $('.demo-gauge').children().attr('id'); 
    getGauge(gauge); 
}); 
관련 문제