我应该用什么功能替换onchange，使其工作而不首先篡改滑块

What function should I replace onchange with for it to work without tampering with the slider first

本文关键字：工作 功能 什么 替换 onchange 我应该      更新时间：2023-09-26

在我的站点: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>

您应该将其封装在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');
    });

仅供参考:input与type="range"在HTML5中是非常新的，在Internet explorer和Firefox中不支持。

如果你使用jQuery-ui，你可以使用jQuery-ui滑块，它将在大多数现代浏览器和大多数设备上工作。

编辑:我尝试了chrome页面和滑块的工作，即使在一个比赛被选中。它不会保持它的值，因为您重置了最小和最大属性。

为滑块的JQUERY UI参考这个URL许多浏览器不支持html 5滑动条。(incliding Firefox)

如果你想用html5滑动条，创建一个函数，比如set_min_max，它会改变滑动条的值。在文档上调用该函数。准备好了，也准备好了。

    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))
            });
     });
演示

看看这把小提琴。

我使用了Jquery UI的$( "#slider" ).slider();函数，在min/max变化函数中做了一些改变。你可以获得比使用HTML5解决方案更好的兼容性。

相关文章：