我有一个javascript问题，我尝试了不同的解决方案，但我不知道如何解决这个问题正确知道，所以，我问你一些帮助!
这段代码的目的，是在视图上显示尽可能多的jQuery滑块，因为有用户。我使用这个jQuery滑块:http://jqueryui.com/slider/#rangemax
在我的例子中，我有6个用户，问题是当我移动滑块的手柄时，JS不允许更新每个用户的'dailyAmount'输入。它只适用于最后一个用户，我假设在页面上保持活动的JS代码只对应于最后一次迭代。
这是代码，我现在正在寻找一个解决方案，但我没有找到任何关于不同社区的讨论。
我有这样的代码(简化以暴露问题):
php代码的开始
<?php
$ii = 0;
foreach($userList as $user){
$threshold = $user->getCurrentThreshold();
$dailyThreshold = $threshold->getDailyThreshold();
$dailySlider = "dailySlider".$ii;
$dailyAmount = "dailyAmount".$ii;
$weeklyAmountId = "weeklyAmount".$ii;
?>
获取每次迭代动态id的Javascript代码
<script type="text/javascript">
var sliderId = '#dailySlider'+<?php echo $ii; ?>;
var dailyAmount = '#dailyAmount'+<?php echo $ii; ?>;
$(function() {
$(sliderId).slider({
range: "max",
min: 1,
max: 4,
value: <?php echo $dailyThreshold ?>,
slide: function( event, ui ) {
// alert(sliderId);
$(dailyAmount).val( ui.value );
}
});
$(dailyAmount).val( $(sliderId).slider( "value" ) );
});
</script>
HTML代码
<div class="threshold">
<form>
<fieldset>
<input type="text" id=<?php echo $dailyAmount ?>>
<div id=<?php echo $dailySlider ?>></div>
</fieldset>
</form>
</div>
PHP代码结束，增加$ii并关闭foreach迭代
<?php>
$ii++;
}
?>
我怎么能有一个活动的JS代码，使'dailyAmount'实时更新的滑块，当我们移动每个用户的手柄?
提前感谢您的建议!
试试这样做。
<?php
ini_set('display_errors', true);
error_reporting(E_ALL);
// you should have error reporting on.
// get $userList as usual...
$ii = 0; // funiest increment var i've seen. Also why don't you use the actual $user ID if you have it.
foreach($userList as $user) {
$threshold = $user->getCurrentThreshold();
$dailyThreshold = $threshold->getDailyThreshold();
$dailySlider = "dailySlider".$ii;
$dailyAmount = "dailyAmount".$ii;
$weeklyAmountId = "weeklyAmount".$ii;
// using a data attribute for this made sense, and helps clean up the javascript.
?>
<div class="threshold" data-uid="<?php echo $ii; ?>">
<form> <!-- i personally wouldn't put that many forms on the page, and do it with one but obviously I don't know what requirements you have -->
<fieldset>
<input class="amount" type="text" id="<?php echo $dailyAmount;?>">
<div class="slider" id="<?php echo $dailySlider; ?>"></div>
</fieldset>
</form>
</div>
<?php
$ii++;
}
?>
Outside the loop..
<script type="text/javascript">
$(function(){
$('.threshold[data-uid]').each(function(index){
var uid = $(this).attr('data-uid');
var sliderId = '#dailySlider'+uid;
var dailyAmount = '#dailyAmount'+uid;
$(sliderId).slider({
range: "max",
min: 1,
max: 4,
value: <?php echo $dailyThreshold ?>,
slide: function( event, ui ) {
// alert(sliderId);
$(dailyAmount).val( ui.value );
}
});
$(dailyAmount).val( $(sliderId).slider( "value" ) );
});
});
</script>
我还没有测试过，但应该是有意义的。