调用javascript函数表单jquery

时间:2012-07-13 11:22:08

标签: javascript jquery jquery-ui

我在Jquery中使用javascript函数时遇到了问题。 我想获得jquery SLIDER的最大值和最小值。 请帮忙。

这是标记。

$(document).ready(function() {

这是函数MAX

    function getMax()
    {
             var options = document.getElementById('.price_range').childNodes;
                var min = 999999999;
                for(var i = 0; i < options.length; i++) {
                    if(options[i].value > max) max = options[i].value;
                }
                return max;
    }

这是函数MIN

function getMin()
    { var options =document.getElementById('my_max').childNodes;
      var min = 999999999;

            for(var i = 0; i < options.length; i++) {
                        if(options[i].value < min) min = options[i].value;

            }
            return min;

    }

这是滑块功能,它必须从javascript函数中获取最小值和最大值

      // Slider
            $('#slider').slider({
                             range: true,
                            min: getMin(),
                            max: getMax(),
                            step: 10, // Use this determine the amount of each interval
                    values: [ 20, 40 ], // The default range
                    slide: function( event, ui ) {
                        $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); // for input text box
                        $( "#my_min" ).val(ui.values[ 0 ]); // Display and selected the min Price
                        $( "#my_max" ).val(ui.values[ 1 ]); // Display and selected the max Price
                        }

            });
             //For dropdown box
    $( "#my_min" ).val($( "#slider" ).slider( "values", 0 ));
    $( "#my_max" ).val($( "#slider" ).slider( "values", 1 ));

         $("select.price_range").change(function () {
        $myMinValue = $("#my_min option:selected").val();
        $myMaxValue = $("#my_max option:selected").val();
        //Make changes on the slider itself
        if($myMinValue <= $myMaxValue) {
            $( "#slider" ).slider({
                values: [$myMinValue, $myMaxValue]
            });
        } else {
            alert("Invalid Input");
        }
    });


        });

这是index.html

  <body>

    <select id="my_min" class="price_range">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select>
<select id="my_max" class="price_range">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select

    ><!-- Slider -->
    <h2 class="demoHeaders">Slider</h2>
    <label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

2 个答案:

答案 0 :(得分:0)

我不确定我是否完全理解你的问题,

但是使用jquery调用函数是这样的。

$(document).ready(function() {
  var returnvalue = functionname();
});

这是你想要的吗?

答案 1 :(得分:0)

没有查看您的整体逻辑,我可以指出一个即时错误:

document.getElementById('.price_range')

.price_range是一个CSS选择器。 getElementById期望文档中元素的ID,因此为了使您的选择器工作,请改用jQuery。