Javascript 我应该用什么函数替换onchange，使其在不修改滑块的情况下工作
在我的网站：alainbruno.nl/form.html上，你会看到表格“Race”和滑块“Age”。我有一个功能，只有当你在选择不同的比赛之前第一次使用滑块时，滑块年龄的最小值和最大值才会正确变化。怎么办 对不起，如果代码没有显示为代码，我是从手机上写的，它不会给出任何附加说明Javascript 我应该用什么函数替换onchange，使其在不修改滑块的情况下工作,javascript,html,forms,function,Javascript,Html,Forms,Function,在我的网站：alainbruno.nl/form.html上，你会看到表格“Race”和滑块“Age”。我有一个功能，只有当你在选择不同的比赛之前第一次使用滑块时，滑块年龄的最小值和最大值才会正确变化。怎么办 对不起，如果代码没有显示为代码，我是从手机上写的，它不会给出任何附加说明 <!DOCTYPE html> <html lang = "en"> <head> <title>Character Creation</title> &l
<!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>
人物塑造
$（函数（）{
//射程
var slider=$（“#slider”），val=slider.val（），output=$（“#output”）；
html（val）；
slider.on（“更改”，函数（）{
html（$（this.val（））；
$（'#Race'）。更改（函数（）{
如果（this.value==“faela”）{
$（“#滑块”）.prop({
"敏":8,，
“max”：52
});
}
如果（this.value==“人”）{
$（“#滑块”）.prop({
"敏":14,，
“最大”：76
});
}
if（this.value==“domovoi”）{
$（“#滑块”）.prop({
"民":26,，
“最大”：254
});
}
如果（this.value==“arcon”）{
$（“#滑块”）.prop({
"民":11,，
“最大”：91
});
}
如果（this.value==“tsaaran”）{
$（“#滑块”）.prop({
"敏":2,，
“最大”：28
});
}
$（'#slider'）.val（'max'/2）；
html（'Slide'）；
});
});
});
形式
外表
选择比赛：
人类
费拉
毛怪守护灵
阿肯
查兰
选择年龄：。
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');
}
您应该将其包装到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');
});
type=“range”输入非常复杂，在Internet explorer和Firefox中不受支持
如果使用，则可以使用，这将适用于大多数现代浏览器和大多数设备
编辑：我在chrome中尝试了这个页面，滑块确实可以工作，即使在选择了比赛之后。它不会保留其值，因为您重置了“最小”和“最大”属性。请查看fiddle
我使用了$（“#slider”）.slider（）函数，并对最小/最大更改函数进行了一些更改。与使用HTML5解决方案相比，您获得了更好的兼容性。您忘了将jquery ui添加到页面中。没有滑块，有。我在这里理解你有困难，我刚开始使用javascript。jQueryUI会是一个库吗？你（或其他任何人）能把我和一些解释JQuery（ui）基本原理的东西联系起来吗？天哪，这部手机快把我累死了，我做了一个html5范围滑块。。但它消失了，因为你在移动设备上写代码。。。lolI已经用一些关于jQuery ui和您正在使用的输入
字段的信息更新了我的答案。太棒了，谢谢，我不知道DOM包装，现在查了一下，它很有意义！jQuery看起来也不错，再次感谢你，伙计
//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');
});