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

Question

我编写了一个名为sliderinitialiser的函数，该函数可以初始化我放置在页面上的两个jQuery滑块-一个用于调整盈亏（PnL）值，另一个用于调整营业额。 此处演示了我正在使用的jQuery小部件： http : //jqueryui.com/slider/#range-vertical 。

调整两个滑块的“句柄”时，它们还会调整几个关联的“最小”和“最大”文本框的值。 这些文本框还具有由滑块触发的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行。

第一次（首次加载页面时）调用sliderinitialiser时，第一个 console.log的输出为0，然后为1。这是预期的。

但是，一旦我尝试移动滑块的手柄， 第二 console.log就会连续输出2。

我尝试过在幻灯片回调函数中“手动”声明sliderindex（即在“ var slideindex = 1”行中添加），如果执行此操作，则其中一个滑块具有功能。

这是我关于stackoverflow的第一个问题。 我一直在为此进行研究，今天已经进行了很长时间的研究，到目前为止尚未找到解决方案。

Answer 1

@威廉·戈登

您想研究一下变量作用域和提升 javascript，因为如果您不熟悉它，可能会感到困惑。

我在您的代码中看到的问题之一是在匿名函数中重新声明了sliderindex 。

另外，您可能需要使用.on('event', function(){})而不是.onchange 。 由于在此代码块中使用的是jQuery选择器，因此建议您在其余的代码中始终使用相同的选择器方法，而请使用$()而不是javascript的document.getElementByID 。

尝试对代码进行更改，看看是否可以解决。 请提供调试信息以获取其他帮助。