0

私のサイト: alainbruno.nl/form.html では、フォーム "Race" とスライダー "Age" が表示されます。この機能を使用すると、スライダーの年齢の最小値と最大値が正しく変更されるのは、別のレースを選択する前に最初にスライダーを使用したときだけです。何をすべきか？

コードがコードとして表示されていない場合は申し訳ありません。携帯電話からこれを書いていますが、追加の指示はありません。

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Character Creation</title>
</head>
<script                   src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
         $(function(){
             //Range
            var slider = $("#slider"), val =         slider.val(), output = $("#output");
             output.html(val);
            slider.on("change", function(){
                output.html($(this).val());

            $('#Race').change(function ()                  {
  if (this.value == "faela") {
      $('#slider').prop({
        'min': 8,
         'max': 52
      });
    }
if (this.value == "human") {
    $('#slider').prop({
        'min': 14,
        'max': 76
      });
  }
if (this.value == "domovoi") {
     $('#slider').prop({
        'min': 26,
        'max': 254
       });
   }
if (this.value == "arcon") {
    $('#slider').prop({
        'min': 11,
        'max': 91
     });
  }
if (this.value == "tsaaran") {
    $('#slider').prop({
        'min': 2,
         'max': 28
      });
    }
   $('#slider').val('max' / 2);
   output.html('Slide');
 });
            });
        });
     </script>
 <body>
 <h1>Form</h1>
 <form>
  <fieldset>
 <legend>Appearance</legend>
 <p>
 <label>
 Select Race:
 </label>
  <select id="Race">
 <option value="human">Human</option>
 <option value="faela">Faela</option>
 <option value="domovoi">Domovoi</option>
 <option value="arcon">Arcon</option>
 <option value="tsaaran">Tsaaran</option>
 </select>

  <label for="range">Select Age:</label> <input         type="range" min="14" max="76" id="slider" value="10" name="range"><span id="output">.    </span>
4

3 に答える 3

0

このフィドルを見てください。

Jquery UIの機能を利用$( "#slider" ).slider();し、min/max 変更関数に若干の変更を加えました。HTML5 ソリューションを使用するよりも優れた互換性が得られます。

于 2013-04-11T10:05:02.890 に答える
0

これを dom ready 関数でラップする必要があります。そして、私はそれがうまくいくはずだと思います。

    //Range
    var slider = $("#slider"), val = slider.val(), output = $("#output");
    output.html(val);

    slider.on('change', function(){
        output.html($(this).val());
    });

    $('#Race').on('change', function(){
        var value = $(this).val();

        if (value == "faela") {
            $('#slider').prop({
                'min': 8,
                'max': 52
            });
        }
        else if (value == "human") {
            $('#slider').prop({
                'min': 14,
                'max': 76
              });
        }
        else if (value == "domovoi") {
            $('#slider').prop({
                'min': 26,
                'max': 254
            });
        }
        else if (value == "arcon") {
            $('#slider').prop({
                'min': 11,
                'max': 91
            });
        }
        else if (value == "tsaaran") {
            $('#slider').prop({
                'min': 2,
                'max': 28
            });
        }
        $('#slider').val('max' / 2);
        output.html('Slide');
    });

参考: inputwithはHTML5type="range"で非常に新しく、Internet Explorer と Firefox ではサポートされていません。

jQuery-uiを使用する場合、ほとんどの最新のブラウザーとほとんどのデバイスで動作するjQuery-ui スライダーを使用できます。

編集: クロムでページを試してみましたが、レースが選択された後でもスライダーが機能します。min プロパティと max プロパティをリセットしたため、その値は保持されません。

于 2013-04-11T09:42:34.477 に答える