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>");

        }

    }

编辑：尝试使用＆＃34;停止＆＃34;但它不会起作用。还有其他提示吗？

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

更新滑块值时动态更改内容

1 个答案: