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滑塊更改功能

回答

相關問題