php循环中的jquery倒计时计时器 - jquery countdown timer within a php loop

jquery countdown timer within a php loop

我想使用keith woods倒计时jquery插件(http://keith-wood.name/countdown.html)以显示在拍卖中出价的剩余时间，但我遇到了麻烦。

当用户进行搜索时，php检索多个搜索结果，并将结束时间的时间戳存储为varchar。

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $numrows++;
        $ID = $row['ID'];
        $img = $row['img'];
        $desc = $row['description'];
        $name = $row['name'];
        $owner = $row['owner'];
        $cprice = $row['cprice'];
        $iprice = $row['iprice'];
        $incprice = $row['incprice'];
        $etime = $row['etime'];
        $nextBid = $cprice + $incprice;
$stmt2 = $pdo->prepare("SELECT * FROM user WHERE username = :username");
$stmt2->bindParam(":username", $owner,PDO::PARAM_STR);
$stmt2->execute();
$thisuser = $stmt2->fetch(PDO::FETCH_ASSOC);
$location = $thisuser['location'];
        echo'
        <tr class="resultindex">
        <td class="imgCol"><a href="displayAuct.php?id='.$ID.'"><img src="'.$img.'" alt="'.$name.'" /></a></td>
        <td class="infoCol">
            <div class="nameDiv">
                <a class="nameLink" href="displayAuct.php?id='.$ID.'">'.$name.'</a><br/>
            </div>
            <div class="descDiv">
                <span class="priceLabel2">'.$desc.'</span>
            </div>
            <div class="userdiv">
                <span class="fromuser">Location: </span><br/>
                <span class="location">'.$location.'</span>
            </div>
        </td>
        <td style="width:1px; background-color:#330066;" ></td>
        <td class="priceCol">
            <div class="currentp"><span class="priceLabel">Current Bid: </span><br/><span class="price1">$'.$cprice.'</span></div>
            <div class="instantp"><span class="priceLabel2">Instant Sale: </span><br/><span class="price2">$'.$iprice.'</span></div>
            <div style="height:5px;"></div>
            <div class="incp"><span class="priceLabel2">Next Bid:</span><br/><span class="price2">$'.$nextBid.'</span></div>
        </td>
        <td style="width:1px; background-color:#330066;"></td>
        <td class="timerCol">
            <div id="timeRow">
                <span class="timeleft">Time Left: </span>
            </div>
            <div id="countdownRow"></div>
        </td>
        </tr>
        ';
    }

在代码的底部，我希望基于该特定项目的倒计时计时器显示在countdownRow分区中

我不知道如何用javascript处理这个问题，我想出了：

var timestamp = <?php echo $etime; ?> * 1000;
    var endTime = new Date();
    endTime.setTime(timestamp);

    $(document).ready(function(e){
        $(".cdtimer").load(function(){
            $(".cdtimer").countdown({until: endTime});
        });
    });

但这似乎不起作用。有人知道我在这里需要做什么吗？

第一句话：html中的id属性必须是唯一的。所以每一行都需要一个唯一的id。

将每行的$etime添加到一个单独的div中，以使html中的所有endtime都可用。

使用jquery查找所有timerCol列，并为每个结果启动一个新的计时器。

$(".timerCol .timeLeft").each(function() {
    endtime = $(this).find(".timeRowValue").val();
    $(this).countdown({until: endTime});
};