Javascript/jquery滑块更改功能

好吧，这就是问题所在。我吮吸jquery，但我试图变得更好。我有一个jQuery UI范围滑块，效果很好。但我试图添加一个更改函数，以便在更改值时，将最小年龄值放入一个文本框中，并将最大年龄放入另一个文本框中。 “change”块之上的所有东西都可以正常工作，但只要我将“change：”块向下添加到代码中，滑块就不会出现，并且我有一个明显的错误。我尝试了20种基于在线教程的不同方式，但我无法弄清楚为什么它不起作用。Javascript/jquery滑块更改功能

$("#slider-range").slider({ 
     range: true, 
     min: 18, 
     max: 90, 

     values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ], 
     slide: function(event, ui) {$("#amount").val( ui.values[ 0 ] + " - " + ui.values[ 1 ]);}}), 

     change: function(event, ui){ 
      var x = document.getElementById('minAgeAmt'); 
      x.value = $("#slider-range").slider("values", 0); 
      var y = document.getElementById('maxAgeAmt'); 
      y.value = $("#slider-range").slider("values", 1); 
     };

*********编辑***********

现在多亏顿它的工作，只是一个问题。我现在有这样的：

$("#slider-range").slider({ 
range: true, 

min: 18, 
max: 90, 
values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ], 
slide: function(event, ui) {$("#amount").val("Age Range : " + ui.values[ 0 ] + " - " + ui.values[ 1 ]);}, 
change: function(event, ui) { 
    var x = document.getElementById('minAgeAmt'); 
    x.value = $("#slider-range").slider("values", 0); 
    var y = document.getElementById('maxAgeAmt'); 
    y.value = $("#slider-range").slider("values", 1);

}

}）;

哪个工作很好，但是#amount元素被赋予一个值的位仅在发生更改时触发（显然）。我怎样才能让它在页面加载时最初触发？只要我改变滑块

和：目前加载页面时，它看起来像这样

我只是想在页面加载生成相同的标题基于初始值

来源

2017-05-05 Rocks

你看看控制台是否有错误？ – nonzaprej

试试这个：

$("#slider-range").slider({ 
    range: true, 
    min: 18, 
    max: 90, 

    values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ], 
    slide: function(event, ui) { 
     $("#amount").val(ui.values[ 0 ] + " - " + ui.values[ 1 ]); 
    }, 

    change: function(event, ui) { 
     var x = document.getElementById('minAgeAmt'); 
     x.value = $("#slider-range").slider("values", 0); 
     var y = document.getElementById('maxAgeAmt'); 
     y.value = $("#slider-range").slider("values", 1); 
    } 
});

第2部分

对于设置 '量' 的值，该代码在上面你可以尝试：

// This gets the current values which you have set above 
var values = $("#slider-range").slider("option", "values"); 
$("#amount").val(values[0] + " - " + values[1]);

请参阅https://api.jqueryui.com/slider/#option-values

来源

2017-05-05 12:48:02 Leighton

简单和像魅力一样工作。谢谢！ – Rocks

为你添加查询Leighton如果你不介意，插入上面的问题... – Rocks

语法错误，您错过了最后一行中的)
更新后的编码

$("#slider-range").slider({ 
     range: true, 
     min: 18, 
     max: 90, 

     values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ], 
     slide: function(event, ui) {$("#amount").val( ui.values[ 0 ] + " - " + ui.values[ 1 ]);}, 

     change: function(event, ui){ 
      var x = document.getElementById('minAgeAmt'); 
      x.value = $("#slider-range").slider("values", 0); 
      var y = document.getElementById('maxAgeAmt'); 
      y.value = $("#slider-range").slider("values", 1); 
     } 
});

来源

2017-05-05 12:36:56 Kuru

这就是我所看到的，但是在你提出的解决方案中，你正在关闭'change'函数，但不是'slider'函数，所以它仍然会抛出错误。 –

已更新，他在幻灯片的末尾添加了'}）'.. – Kuru

对不起，我确实拥有所有这些额外的）和}，我只是没有包括它们，当我剪切和粘贴 – Rocks

有一些语法错误，请看看下面的代码片段的详细信息，你必须把change functionslider功能被关闭

$("#slider-range").slider({ 
 
    range: true, 
 
    min: 18, 
 
    max: 90, 
 

 
    values: [], 
 
    slide: function(event, ui) { 
 
     $("#amount").val(ui.values[0] + " - " + ui.values[1]); 
 
    }, 
 
    change: function(event, ui) { 
 
     var x = document.getElementById('minAgeAmt'); 
 
     x.value = $("#slider-range").slider("values", 0); 
 
     var y = document.getElementById('maxAgeAmt'); 
 
     y.value = $("#slider-range").slider("values", 1); 
 
    } //close change function 
 
}); //close Slider Function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="slider-range"></div>

来源

2017-05-05 12:42:04 Curiousdev

之前使用以下

对于分钟值

var min = $("#slider-range").slider("option", "min");

对于最大值

var max = $("#slider-range").slider("option", "max");

来源

2017-05-05 12:47:37

Javascript/jquery滑块更改功能

回答

相关问题