如何用*just*jquery/js复制php和jquery/js组合的功能

我写了一个名为slideritializer的函数，它启动我放在页面上的两个jQuery滑块——一个用于调整损益（PnL）值，另一个用于调节营业额。这里演示了我正在使用的jQuery小部件：http://jqueryui.com/slider/#range-垂直。

当调整两个滑块的"手柄"时，它们还会调整几个关联的"最小"answers"最大"文本框的值。这些文本框的onchange事件也由滑块触发，因此它们将更新后的值发送到用作存储的两个数组（minValueSTORE和maxValueSTORE）。

我开始使用的工作代码如下所示。我希望用纯javascript将其复制为一个更高效、更灵活的循环。

初始工作代码（成功）

    <script>
    //Used to control the numerical/currency filters
    function sliderinitialiser() {
    //Initiates the PnL slider
    $(function() { 
        $( "#slider-range-PnL").slider({
          max:getminandmax('max','PnL'),
          min:getminandmax('min','PnL'),
          orientation: "vertical",
          range: true,
          values: [minValueSTORE['PnL'],maxValueSTORE['PnL']],
          slide: function( event, ui) {

            $( "#amountmin-PnL").val( "£" + ui.values[ 0 ]);
            $( "#amountmax-PnL").val( "£" + ui.values[ 1 ]);
            //alert(ui);
            var minid = "amountmin-PnL";
            var maxid = "amountmax-PnL";
            document.getElementById(minid).onchange();
            document.getElementById(maxid).onchange();
          }
        });
        $( "#amountmin-PnL").val("£" + minValueSTORE['PnL']);
        $( "#amountmax-PnL").val("£" + maxValueSTORE['PnL']);

       //Initiates the Turnover slider
        $( "#slider-range-Turnover").slider({
          max:getminandmax('max','Turnover'),
          min:getminandmax('min','Turnover'),
          orientation: "vertical",
          range: true,
          values: [minValueSTORE['Turnover'],maxValueSTORE['Turnover']],
          slide: function( event, ui) {
            $( "#amountmin-Turnover").val( "£" + ui.values[ 0 ]);
            $( "#amountmax-Turnover").val( "£" + ui.values[ 1 ]);
            //alert(ui);
            var minid = "amountmin-Turnover";
            var maxid = "amountmax-Turnover";
            document.getElementById(minid).onchange();
            document.getElementById(maxid).onchange();
          }
        });
        $( "#amountmin-Turnover").val("£" + minValueSTORE['Turnover']);
        $( "#amountmax-Turnover").val("£" + maxValueSTORE['Turnover']);

  });
  }
  </script>

上面的代码似乎工作正常。然而，我希望实现许多这样的过滤器，因此我认为使用循环将是最有效的方法。

我对php比javascript更有经验，并且我能够使用php数组和循环来复制上面的代码，如下面的代码示例所示：

使用PHP实现循环（成功）

    function sliderinitialiser() {
    $(function() {
    //construct an array to hold the columns with sliders that need to be initialised
    <?php $sliders = ['PnL','Turnover']; 

    for ($sliderindex = 0; $sliderindex < 2; $sliderindex++) { ?>
        //console.log(sliderindex);
        $( "#slider-range-<?php echo $sliders[$sliderindex] ?>").slider({
          max:getminandmax('max','<?php echo  $sliders[$sliderindex] ?>'),
          min:getminandmax('min','<?php  echo  $sliders[$sliderindex] ?>'),
          orientation: "vertical",
          range: true,
          values: [minValueSTORE['<?php echo   $sliders[$sliderindex] ?>'],maxValueSTORE['<?php echo   $sliders[$sliderindex] ?>']],
          slide: function( event, ui) {

            $( "#amountmin-<?php echo   $sliders[$sliderindex] ?>").val( "£" + ui.values[ 0 ]);
            $( "#amountmax-<?php echo   $sliders[$sliderindex] ?>").val( "£" + ui.values[ 1 ]);
            //alert(ui);
            var minid = "amountmin-<?php echo   $sliders[$sliderindex] ?>";
            var maxid = "amountmax-<?php  echo  $sliders[$sliderindex] ?>";
            document.getElementById(minid).onchange();
            document.getElementById(maxid).onchange();
          }
        });
        $( "#amountmin-<?php  echo  $sliders[$sliderindex] ?>").val("£" + minValueSTORE['<?php  echo  $sliders[$sliderindex] ?>']);
        $( "#amountmax-<?php  echo  $sliders[$sliderindex] ?>").val("£" + maxValueSTORE['<?php  echo  $sliders[$sliderindex] ?>']);
<?php    } ?>
  });
  }

上面的代码似乎可以根据需要工作。

现在，据我所知，使用php生成javascript代码并不是一种好的做法。因此，我想复制上面代码的功能，但在javascript/jquery中完全复制。

我尝试使用以下代码，但这没有正常工作。我无法调整滑块上的手柄，Chrome开发工具显示以下错误：

    Uncaught TypeError: Cannot read property 'onchange' of null

使用纯JavaScript的循环实现（不成功）

这是我使用的代码：

    function sliderinitialiser() {
    var sliderindex = 0;
    $(function() {
    //construct an array to hold the columns with sliders that need to be initialised
    var sliders = ['PnL','Turnover'];
    var sliderindex = 0;
    for (sliderindex = 0; sliderindex < sliders.length; sliderindex++) {
        //first console log
        console.log(sliderindex);
        $( "#slider-range-" + sliders[sliderindex] ).slider({
          max:getminandmax('max',sliders[sliderindex]),
          min:getminandmax('min',sliders[sliderindex]),
          orientation: "vertical",
          range: true,
          values: [minValueSTORE[sliders[sliderindex]],maxValueSTORE[sliders[sliderindex]]],
          slide: function( event, ui) {
            //second console log
            console.log(sliderindex);                
            $( "#amountmin-" + sliders[sliderindex] ).val( "£" + ui.values[ 0 ]);
            $( "#amountmax-" + sliders[sliderindex] ).val( "£" + ui.values[ 1 ]);
            //alert(ui);
            var minid = "amountmin-" + sliders[sliderindex];
            var maxid = "amountmax-" + sliders[sliderindex];
            document.getElementById(minid).onchange();
            document.getElementById(maxid).onchange();
          }
        });
        $( "#amountmin-" + sliders[sliderindex] ).val("£" + minValueSTORE[sliders[sliderindex]]);
        $( "#amountmax-" + sliders[sliderindex] ).val("£" + maxValueSTORE[sliders[sliderindex]]);
    }

  });

  }

调试结果

关于调试，我在代码中放置了console.log行，如您所见。

当第一次调用sliderinitializer时（在初始页面加载时），第一个控制台.log的输出为0，然后为1。这是意料之中的事。

但是，只要我尝试移动滑块的手柄，第二个控制台.log就会连续输出2。

我曾尝试在幻灯片回调函数中"手动"声明sliderindex（即在"var sliderinddex=1"行中添加），如果我这样做，则其中一个滑块具有功能。

这是我对斯塔克夫流的第一个问题。我今天已经对此进行了很长时间的研究，到目前为止还没有找到解决方案。