javascript - 使用 Jquery 临时创建 html div

Question

我正在尝试按需创建 div，然后将其超时，然后将其隐藏并从 dom 中删除。“load_bar”的显示属性设置为none，这样我就可以使用最后一个选择器来获取对我刚刚创建的实例的引用。重要的是，此解决方案可以创建几个在自己的超时时钟上运行的 div

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
        $('.load_bar:last').show().delay(t).hide().remove();
    });
});

当我删除时，每件事都可以创建 div.delay().hide().remove(); 但是当我添加这个时，div 根本不显示

Answer 1

创建适当的元素，这样您就可以引用函数中的元素：

$(document).ready(function () { 
    $('#add').click(function () {
        var t           = (Math.random()*20)*1000,
            destination = $('input').val(),
            div         = $('<div />', {'class':'load_bar', text: destination});

        $('#holding_pen').append(div);
        div.show(1).delay(t).hide(1, function() {
            $(this).remove();
        });
    });
});

此外，hide()andshow()不适用于动画队列，随后也不能使用，delay() 除非给出持续时间，这就是为什么该元素永远不会显示、delay()不起作用并且元素会立即隐藏的原因。

编辑：

此外，remove()它不是一个动画方法，因此它不适用于delay()，而是hide()一个有用的回调，请参见上面的编辑代码。

小提琴

Answer 2

问题是因为delay用于停止 jQuery 动画队列，这两者show并hide没有使用。因此，您的 div 被显示并且它们立即被隐藏。改用setTimeout：

$('#add').click(function () {
    var destination = $('input').val();
    $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
    $('.load_bar:last').show();
    setTimeout(function() {
        $('.load_bar:last').hide();
    }, Math.random() * 20 * 1000); // * 1000 = seconds
});

示例小提琴

Answer 3

delay() 函数仅适用于在元素上排队的操作。

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
        $('.load_bar:last').show().delay(t).queue(function( nxt ) {
            $(this).hide().remove();
            nxt(); // continue the queue
        });
    });
});

Answer 4

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').innerHTML='<div class="load_bar">'+destination+'</div>';

    });
});