0

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;">
4

2 に答える 2

0

全体的なロジックを確認していないので、すぐにエラーが 1 つ指摘できます。

document.getElementById('.price_range')

.price_rangeCSSセレクターです。getElementByIdはドキュメント内の要素の ID を想定しているため、セレクターを機能させるには、代わりに jQuery を使用してください。

于 2012-07-13T11:26:48.150 に答える
0

あなたの問題を完全に理解しているかどうかわかりませんが、

でもjqueryを使って関数を呼び出すとこんな感じ。

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

これはあなたが探しているものですか？

于 2012-07-13T11:26:41.853 に答える