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

我编写了一个名为sliderinitialiser的函数，它启动两个jQuery滑块，我将它们放在我的页面上——一个用于调整损益（PnL）值，另一个用于调整营业额。我正在使用的jQuery小部件如下所示：

调整两个滑块的“手柄”时，它们也会调整两个相关的“最小值”和“最大值”文本框的值。这些文本框还具有由滑块触发的onchange事件，以便它们将更新的值发送到用作存储的两个数组（minValueSTORE和maxValueSTORE）

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

初始工作代码（成功） 使用纯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]]);

    }



  });


  }

函数滑块初始化器（）{
var sliderindex=0；
$（函数（）{
//构造一个数组，用需要初始化的滑块固定列
var滑块=['PnL'，'overship']；
var sliderindex=0；
对于（sliderindex=0；sliderindex

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

首次调用sliderinitialiser时（在初始页面加载时），第一个console.log的输出为0，然后为1。这是意料之中的

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

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

这是我关于stackoverflow的第一个问题。今天，我一直在研究这个问题，很长一段时间都没有找到解决方案。

@William Gordon

您需要研究javascript，因为如果您不熟悉它，它可能会令人困惑

我在代码中看到的一个问题是在匿名函数中重新定义

sliderindex

此外，您可能希望使用

.on（'event'，function（）{}）

而不是

.onchange

。由于您在此代码块中使用jQuery选择器，因此建议您在整个代码剩余部分使用相同的选择器方法，使用

$（）

而不是javascript的

文档.getElementByID

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

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

  });
  }

    Uncaught TypeError: Cannot read property 'onchange' of null

    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]]);

    }



  });


  }