如何使用* 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 。

嘗試對代碼進行更改，看看是否可以解決。 請提供調試信息以獲取其他幫助。