javascript - 动态引用 JQUERY 中的子元素

Question

我正在尝试创建一个小聊天面板来练习我正在使用 JQuery 学习的内容。

到目前为止，我已经设法创建了一个丑陋的面板，允许用户输入消息并将其发送到面板的左侧。

但是消息出现在彼此之上。因此，我使用 Jquery 为发送的消息制作动画，从而将它们向上推。

我有一个名为 animateLeftSide 的函数，它试图移动创建的每个元素。但目前它将所有这些都向上移动。我如何单独定位每个元素？

这是我写的函数:

var animateLeftSide = function() {
    var numberOfMessages = $('.leftside').children().length
    var i = 0
    while (i < numberOfMessages) {
        if (i > 0) {
            $('.leftside').children(i).animate({
                    top: '-=70px'
                }, 100) //move it upwards 
        }
        i++;
    }
};

Here is a DEMO of my code .

Answer 1

它只是使所有元素向上移动，因为每次输入输入时(使用 while 循环)您都将所有元素向上移动。只需删除 while 循环。但是去掉它，我们第一次插入的时候会留下一个空白。为此，我在您的 jsfiddle 中修改了您的 js 并发现它可以正常工作。试试这个

$(document).ready(function () {
    var i=false;
    $('#btn-send').click(function () {
        var toAdd = $('input[name=textbox]').val();

        if (toAdd.length == 0) {
            alert("No message Entered");
        } else {

            animateLeftSide(i);
            i=true;

            $('.leftside').append('<div class="message">' + toAdd + '</div>');
            $('input[name=textbox]').val('');
            //alert("" + $('.leftside').children().length + "");
                    }
    });

    $(document).on('click', '.message', function () {
        $(this).remove();
    });


    var animateLeftSide = function (i) {  
        if(i){
                $('.leftside').children().animate({
                    top: '-=70px'
                }, 100) //move it upwards 
        }
    };

});

如果还有不明白的，欢迎留言。我可以清除你。