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

请参阅此 URL以获取 JQUERY UI 的滑块 html 5 滑块不受许多浏览器支持。（包括火狐）

如果您想使用 html5 滑块，请创建一个函数，例如 set_min_max，以更改滑块值。在 document.ready 和 change 上调用该函数。

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


    }

和

    $(function(){
     //Range
      var slider = $("#slider")
      val =         slider.val()
      output = $("#output")
      set_min_max($('#Race') )  ;
 slider.on("change", function(){
     output.html($(this).val())});
            $('#Race').change(function () {set_min_max($(this))
            });
     });

演示

于 2013-04-11T09:41:08.883 回答
0

您应该将其包装在 dom 就绪函数中。我想它应该可以工作。

    //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 滑块，该滑块适用于大多数现代浏览器和大多数设备。

编辑：我尝试了 chrome 中的页面，即使选择了比赛，滑块也可以工作。它不会保留它的价值，因为您重置了 min 和 max 属性。

于 2013-04-11T09:42:34.477 回答
0

看看这个小提琴。

我使用了$( "#slider" ).slider();Jquery UI 的功能，并对最小/最大更改功能进行了一些更改。您可以获得比使用 HTML5 解决方案更好的兼容性。

于 2013-04-11T10:05:02.890 回答