javascript倒數計時器未在gridview中顯示

Question

我已經用一個硬編碼的日期實現了這個javascript，它可以正確顯示，我在griview中嘗試了它，但是它是從數據庫中顯示結束日期而不顯示倒數，但是我想從數據庫中獲取結束日期：另外，當倒計時結束時，它應顯示一條消息：“ Project over”（項目結束），請朋友幫幫我。

<script type="text/javascript" src="../Scripts/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.countdown.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.countdown.js"></script>


                <asp:TemplateField HeaderText="CountDown" ItemStyle-Width="300px">
                    <ItemTemplate>
                        <div id="myCountdownClass"><%# !string.IsNullOrEmpty(Eval("EndDate").ToString()) ? Convert.ToDateTime(Eval("EndDate")).ToString("MM'/'dd'/'yyyy") : "" %></div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

        </asp:GridView>

        <script type="text/javascript">
            $(document).ready(function () {
                $('.myCountdownClass').each(function () {
                    var date = $(this).text();
                    $(this).countdown(date, function (event) {
                        $(this).text(event.strftime('%D days %H:%M:%S'));
                    });
                });
            });

        </script>

Answer 1

您在模板中指定了id ，但是您試圖在javascript（ $('.myCountdownClass') ）中選擇一個類。 更改此：

<div id="myCountdownClass">

對此：

<div class="myCountdownClass">

這是工作示例（檢查script.js文件）：

http://embed.plnkr.co/uffoqIjhqvvV7lzFlmzu/