0

我有一个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”？

提前感谢您的建议！

4

1 回答 1

1

尝试这样的事情。

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

我没有测试它，但它应该是有意义的。

于 2013-05-12T16:12:12.257 回答