Question

我正在尝试将元素id从html页面传递给jquery函数。听起来很容易，但由于某些原因它不起作用这段代码位于名为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>

我确信这是一个简单的答案，我找不到它任何帮助将不胜感激

Answer 1

正如他们在评论中所说，它应该是这样的：

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

Answer 2

试试这个：

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

将元素id传递给javascript中的函数

2 个答案: