在表中显示ajax响应不起作用


Displaying of ajax response in a table not working

我有这个脚本,但我不知道这里缺少什么:

    $(document).on('click','.btn-start-timer',function(){
            var id = $(this).val(),
                time = $(this).parent().parent().find('.rendered_time').text();
                //console.log(time)
                var i = window.setInterval(function(){
                        var future = addMinutes(dat, 20);
                        //var future = new Date("Dec 12 2013 22:10:00 GMT-0800 (Pacific Standard Time) ");
                        var now = new Date();
                        //console.log(tim);
                        var difference = Math.floor((future.getTime() - now.getTime()) / 1000);
                        var seconds = fixIntegers(difference % 60);
                        difference = Math.floor(difference / 60);
                        var minutes = fixIntegers(difference % 60);
                        difference = Math.floor(difference / 60);
                        var hours = fixIntegers(difference % 24);
                        difference = Math.floor(difference / 24);
                        var days = difference;
                         $(this).parents('tr:first').find('td .days').html(seconds + "s");
                         $(this).parents('tr:first').find('td .hours').html(minutes + "m");
                         $(this).parents('tr:first').find('td .minutes').html(hours + "h");
                         $(this).parents('tr:first').find('td .seconds').html(days + "d");
                if(hours == 0 && minutes == 0 && seconds == 0){
                         window.clearInterval( i );   
                        alert('times up');
                    }
                }, 1000);
                });

这是我的html:

                    <thead>
                        <tr>
                        <th>Client Name</th>
                        <th>Service Name</th>
                        <th>Time</th>
                        <th>Therapist Name</th>
                        <th>Status</th>
                        <th>Actions</th>
                        <th>Time</th>                
                        </tr>
                    </thead>
                    <tbody>

                <? $res = mysql_query("select * from rendered_services");
                while($row2 = mysql_fetch_array($res)){?>
                <? $id_no = $row2['t_id'];
                $selectstatus=$row2['therapist_status'];
                ?>

            <tr>
            <td align="left"><?php echo $row2['client_name']; ?></td>
            <td align="left"><?php echo $row2['rendered_service']; ?></td>
            <td align="left" class="rendered_time"><?php echo $row2['rendered_time']?></td>
            <td align="left"><?php echo $row2['assign_therapist']?></td>
            <td align="left"><?php echo $row2['therapist_status']?></td>
            <td align="left">
            <button class="btn btn-success btn-small btn-start-timer" value="<?php echo $row2['t_id']; ?>">Start</button>
            <a class="btn btn-success btn-small" data-toggle="modal" href="pay_bill.php<?php echo '?t_id='.$id_no; ?>">Pay Bill</a>
            </td>
            <td>
                <span class="days">a</span>
                <span class="hours">a</span>
                <span class="minutes">qa</span>
                <span class="seconds">a</span>
            </td>
            </tr>
            <?php }?>
                    </tbody>
                </table>

我的问题是,当我单击.btn-start-timer时,数据或时间没有显示在指定的选择器中。但当我把$(this).parents('tr:first').find('td .seconds').html(days + "d");放在setInterval之外时,它就起作用了!那么我在这里错过了什么?

您正在丢失setInterval函数中的this上下文

要进行补救,请将$(this)声明为setInterval 之外的变量

var $this=$(this)
var id = $this.val(),
time = $this.parent().parent().find('.rendered_time').text();
 var i = window.setInterval(function(){
    /* replace instenaces of $(this) with $this*/
})