Javascript按钮单击滑块更改事件

我有一个下面的javascript函数，当我移动滑块时更新显示值。但是，现在我计划只在单击按钮时更新值。这是javascript函数

.on("slider:ready slider:changed", function (event, data) {
            var $output =$(this).nextAll(".output:first");
            $output.html(data.value.toFixed(2));
            masterData[$output.attr("id").replace(/output/,"")] = data.value;
            $("#kwBody > tr").each(function() {
               var $cells = $(this).children("td");

               var found=false,count=0,currentCell;
               for (var i=0;i<masterData.length;i++) {
                 currentCell=$cells.eq(i+1);
                 found = parseInt(currentCell.text(),10) >=masterData[i];
                 currentCell.toggleClass("found",found); //add or remove class to highlight 
                 count+=found;
               }
               window.console && console.log(masterData,count);
               $(this).toggle(count==masterData.length); // show if all cells >

            });
        });
});

.on（“滑块：就绪滑块：已更改”），函数（事件、数据）{
var$output=$（this.nextAll（“.output:first”）；
$output.html（data.value.toFixed（2））；
masterData[$output.attr（“id”）.replace（/output/，“”）]=data.value；
$（“#kwBody>tr”）。每个（函数（）{
var$cells=$（this.children（“td”）；
var found=false，count=0，currentCell；
对于（var i=0；i=masterData[i]；
currentCell.toggleClass（“已找到”，已找到）；//添加或删除要突出显示的类
计数+=已找到；
}
window.console&&console.log（主数据、计数）；
$（this）.toggle（count==masterData.length）；//显示是否所有单元格>
});
});
});

我设计了一个按钮如下

 <button onclick="myFunction()">Display!</button>

显示！

我在myfunction（）中包含了上述javascript函数。但是，在单击按钮时不会进行更新。可以找到一个工作示例

编辑：

  <h2>Keyword Scores</h2>
  <?php

$i = 0;
while (++$i <= $_SESSION['totalcolumns']-1) {
isset($_GET["slider$i"]) ? $rangevalue=$_GET["slider$i"] : $rangevalue="";
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
        <br><?php echo "Keyword" ?>
        <?php echo $i ?>
        <br><input type="text" data-slider="true" id="slider<?php echo $i; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
        <meta http-equiv="refresh">
        <?php } ?>  



<script>

关键字得分



将“id”属性添加到按钮。说它是“我的按钮”。现在,

我假设var主数据是全局的

将滑块侦听器更改为

.on("slider:ready slider:changed", function (event, data) {
    var $output =$(this).nextAll(".output:first");
    $output.html(data.value.toFixed(2));
    masterData[$output.attr("id").replace(/output/,"")] = data.value;   
 });


为按钮创建单击侦听器

$("#myButton").click(function (){
       $("#kwBody > tr").each(function() {
          var $cells = $(this).children("td");
          var found=false,count=0,currentCell;
           for (var i=0;i<masterData.length;i++) {
             currentCell=$cells.eq(i+1);
             found = parseInt(currentCell.text(),10) >=masterData[i];
             currentCell.toggleClass("found",found); //add or remove class to highlight 
             count+=found;
        }
       window.console && console.log(masterData,count);
       $(this).toggle(count==masterData.length); // show if all cells >

    });
});


我没有试过，但希望它能起作用。
你的问题模棱两可。你到底想做什么？在我看来，您希望在滑块中设置值，然后仅在按下按钮时过滤表格。我说得对吗？如果是这样，您想将所有三个滑块值应用于过滤器？谢谢您的评论。是的，一旦我在UI过滤器中设置了值，那么我只需要显示这些值。是的，我需要将所有三个值应用到过滤器。这已经由javascript函数处理了。我需要这只发生在我按下按钮。请张贴一些幻灯片的标记我已经添加了编辑代码。谢谢你的建议。它可以工作，但第二页的内容仍然只显示在第二页中，而不是在第二页中得到更新。有办法吗？我不明白你的意思。你能详细说明一下吗？如果你看到我在问题中提供的链接，我的程序中有分页。我最初每页显示20个值。如果我总共有50个值，我有3页，前两页有20个值，最后一页有10个值。假设，在设置滑块值后，我只得到15个值，理想情况下，我应该在第一页显示所有15个值，而不是在3页中显示它们。哦，我明白了，我似乎已经理解了你想要的。也许每次加载页面时调用这个方法就能满足您的需要？是的，我想是的。可能吗？如果你愿意，我可以分享更多的代码。
 $(document).ready(function(){
   $("#myButton").click();
 });