我编写了一个名为sliderinitialiser的函数，它启动了我放在页面上的两个jQuery滑块 - 一个用于调整盈亏（PnL）值，另一个用于调整营业额。我正在使用的jQuery小部件在这里演示：http://jqueryui.com/slider/#range-vertical。
当＆＃39;处理＆＃39;在调整两个滑块的位置时，它们还会调整几个相关的“最小”滑块的值。和＆＃39;最大＆＃39;文本框。这些文本框也有滑块触发的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数组和循环来复制上面的代码，如下面的代码示例所示：
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 Developer Tools指出了以下错误：
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]]);
}
});
}
关于调试，我在代码中放置了console.log行，如您所见。
首次调用sliderinitialiser时（在初始页面加载时）， first console.log的输出为0，然后是1.这是预期的。
但是，只要我尝试移动滑块的手柄， second console.log就会连续输出2。
我已尝试手动声明sliderindex＆＃39;在幻灯片回调函数中（即在行中添加＆gt; var sliderindex = 1＆＃39;），如果我这样做，则其中一个滑块具有功能。
这是我关于stackoverflow的第一个问题。我一直在研究它并在今天研究它很长时间，到目前为止还没有找到解决方案。
答案 0 :(得分：0)
@William Gordon
你想查看Variable scope and hoisting的javascript，因为如果你不熟悉它可能会让人感到困惑。
我在代码中看到的一个提升问题是在匿名函数中重新声明sliderindex。
此外，您可能希望使用.on('event', function(){})代替.onchange。由于您在此代码块中使用了jQuery选择器，因此建议您在使用$()而不是javascript＆＃39; s document.getElementByID的代码中使用相同的选择器方法。
尝试对代码进行更改以查看是否已解决此问题。请提供调试信息以获得更多帮助。