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 
        }
    };

});

如果您还不清楚，请发表评论。我可以清楚你。

动态地引用JQUERY中的Children元素

1 个答案: