更新滑塊值時動態更改內容

Question

我試圖在滑塊值發生更改時動態更改頁面內容。在用戶設置滑塊的時刻，點擊下面的按鈕並顯示內容。當滑塊又變了，用戶必須再次單擊該按鈕重新加載內容（因爲每個按鈕分配給goalkeeperstat功能。

<a class="chosenstat" title="Saves" value="saves" name="save" onclick="goalkeeperstat(this);">Saves</a> 

而不必再次按下按鈕，我想內容用戶拖動滑塊手柄，以他們所選擇的價值，儘快改變。

下面是我的頁面截圖。

http://i.imgur.com/eZq08sI.jpg

$(function initSlider() { 
    $("#slider1").slider({ 
     range: true, 
     min: 0, 
     max: 100, 
     values: [0, 100], 
     slide: function update1 (event, ui) { 
     $(".amount").val(ui.values[0] + " - " + ui.values[1]); 
     slidervalueg1 = $('#g1').val(ui.values[0]); 
     slidervalueg2 = $('#g2').val(ui.values[1]); 
     } 
    }); 
    $(".amount").val($("#slider1").slider("values", 0) + 
     " - " + $("#slider1").slider("values", 1)); 
    }); 

function goalkeeperstat(element){ 
    $('#result1').empty(); 
    $('.amount').empty(); 

     var category = element.getAttribute("value"); 
     var categoryprompt = element.getAttribute("title"); 
     var infocategory = element.getAttribute("name"); 
     var position = 1; 
     var fr = $(myjson).filter(function (i,n){return n.element_type===position & n[category] >= slidervalueg1.val() && n[category] <= slidervalueg2.val() }); 

     for (var i=0;i<fr.length;i++) 
     { 
     document.getElementById('result1').innerHTML += ("<div class='profile'><img src='https://platform-static-files.s3.amazonaws.com/premierleague/photos/players/110x140/p" + fr[i].code + ".png'/><div class='playerinfo'><p>Name: " + fr[i].first_name + " " + fr[i].second_name + "</p><p>Position: " + posdictionary[fr[i].element_type.toString()] + "</p><p class='teamname'>Team: " + dictionary[fr[i].team.toString()] + "</p><p>" + categoryprompt + ": <span class='categoryprompt'>" + fr[i][category] + "</span></p></div><div class='infobg'><p>Minutes: " + fr[i].minutes + "</p><p>Minutes per " + infocategory + ": " + parseFloat(Math.round((fr[i].minutes/fr[i][category]) * 100)/100).toFixed(2) + "</p></div></div>"); 

     } 

    } 

編輯：嘗試使用「停止」，但它不會工作。任何其他提示？

Answer 1

您可以使用事件或方法明確：

$("#slider1").slider({ 
     range: true, 
     min: 0, 
     max: 100, 
     values: [0, 100], 
     slide: function update1 (event, ui) { 
     $(".amount").val(ui.values[0] + " - " + ui.values[1]); 
     slidervalueg1 = $('#g1').val(ui.values[0]); 
     slidervalueg2 = $('#g2').val(ui.values[1]); 
     }, 
    stop : function(event, ui){ 
     console.log("slider changed"); 
     // call your fucntion here 
    } 
    });