javascript - Javascript按钮单击滑块更改事件

Question

我有一个下面的 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 >

            });
        });
});

我设计了一个按钮，如下所示。

 <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>

Answer 1

为按钮添加一个“id”属性。说它是“myButton”。现在，

1. 我假设 var masterData 是全局的

2. 将滑块侦听器更改为

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

3. 为按钮创建一个点击监听器

   $("#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 >
   
       });
   });
   

4. 模拟按钮单击每个页面加载。

    $(document).ready(function(){
      $("#myButton").click();
    });
   

我还没有尝试过，但希望它有效。