Question

我有一个javascript问题，我尝试了不同的解决方案，但我不知道如何解决这个问题，所以，我正在向你寻求帮助！

这段代码的目的是在视图中呈现与用户一样多的jQuery滑块。我正在使用这个jQuery滑块：http://jqueryui.com/slider/#rangemax

在我的例子中，我有6个用户，问题是JS无法更新＆＃39; dailyAmount＆＃39;当我移动滑块的手柄时为每个用户输入。它仅适用于最后一个用户，我假设在页面上保持活动状态的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代码来制作“每日安装”＃39;当我们为每个用户移动句柄时，滑块实时更新？

Thanx提前收到您的建议！

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

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

PHP中的jQuery滑块foreach问题

1 个答案: