JQuery中倒计时的问题

时间:2014-05-20 11:29:09

标签: javascript jquery html css countdown

当我双击卡片时,弹出对话框,然后可以创建评论。到现在为止还挺好。创建评论时,可以对其进行编辑。

然后我想要对“编辑”进行倒计时,例如。 3秒后,“编辑”可能对用户不可见。到现在为止还挺好。

问题是,关闭窗口或通过按钮保存数据并打开同一张卡后,编辑再次出现3秒,依此类推。

创建评论时我想要,3秒后“编辑”再也不会出现。就像在这个网站上一样。

知道如何实现这个吗?

Live Demo

jQuery:倒计时,

// Set the timer to countdown 
        var sec = 3;
        var timer = window.setInterval(function () {
            sec--;
            if (sec == -1) {
                $('.edit').addClass('hidden');
                clearInterval(timer);
            }
        }, 1000);

jQuery:添加评论,

function addComment(commentString) {

        var container = $('#divComments');
        var inputs = container.find('label');
        var id = inputs.length + 1;
        var data1 = {            
            commentString: commentString
        };

        var div = $('<div />', { class: 'CommentStyle' });

        $('<label />', {
            id: 'comment' + id,
            for: 'comment' + id,
            text: commentString
        }).on('change', function () {            
            data1.commentString = $(this).text();
        }).appendTo(div);      

        $('<br/>').appendTo(div);

        var $Image = $('<img />',
            {
                "src": "/Pages/Images/alert.png",
                "class": "CommentImage",
                "for": "comment" + id
            }).appendTo(container);

        var d = new Date();
        var $fulaDate = $('<div>' + d.getDate()
            + "-" + monthNames[d.getMonth()]
            + "-" + d.getFullYear()
            + "//" + d.getHours()
            + ":" + d.getMinutes()
            + '</div>').addClass('labelStyle').append(' ~').appendTo(div);

        var $edit = $('<p />', {
            class: 'edit',
            for: 'comment' + id,
            text: 'Edit'
        }).append(' ~').appendTo(div);

        var $delete = $('<p />', {
            class: 'delete',
            for: 'comment' + id,
            text: 'Delete'
        }).appendTo(div);

       // Set the timer to countdown 
        var sec = 3;
        var timer = window.setInterval(function () {
            sec--;
            if (sec == -1) {
                $('.edit').addClass('hidden');
                clearInterval(timer);
            }
        }, 1000);        
        div.appendTo(container).focus();
        container.data('comments').push(data1);
    }

1 个答案:

答案 0 :(得分:1)

修改

请将此行放在:

之后
  $.each($currentTarget.data('comments'), function (i, comment) {
        addComment(comment.commentString);
    });

    $(".edit").each(function(){
        $(this).addClass("hidden");
    });

休息所有行应该正常工作。试试这个解决方案这可能会对你有帮助。