在javascript中将元素id传递给函数
我试图将一个元素id从html页面传递给jquery函数。 听起来很简单,但由于某种原因,它不起作用。在javascript中将元素id传递给函数,javascript,jquery,html,Javascript,Jquery,Html,我试图将一个元素id从html页面传递给jquery函数。 听起来很简单,但由于某种原因,它不起作用。 这段代码位于名为func.js的文件中 function getGauge(gname){ var labels = { visible: true, position: 'inside' }, theme = getDemoTheme(); //Create jqxGauge $('#'+gname).jqxGauge({ width:'2
这段代码位于名为func.js的文件中
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>
此示例演示了基本仪表设置。
$(文档).ready(函数(){
计量器(“计量器”);
); {
选择权
-
显示标签
-
仪表内部
-
超出标准
-
显示范围
-
显示边界
我肯定有一个简单的答案,我就是找不到任何帮助都将不胜感激正如他们在评论中所说,应该是这样的:
$(document).ready(function (){
getGauge("gauge");
});
试试这个:
$(document).ready(function (){
var gauge = $('.demo-gauge').children().attr('id');
getGauge(gauge);
});
你注意到HTML中JS代码的语法错误了吗?);{是的,你的
.ready
函数有一个错误。你正确地更改了它,现在它工作正常了。我犯了一个愚蠢的错误……这个问题似乎离题了,因为它是关于一个微不足道的语法错误