个人中心
gpt4 book ai didi

javascript - jQuery/JavaScript : How to prepend elements without going back to the top of last prepended element?

转载 作者：太空宇宙 更新时间：2023-11-03 18:08:55 29 4
gpt4 key购买 nike

每当我单击 prepend 时，在所有元素都被添加到前面之后，聊天区域的 View 会切换到聊天区域的顶部或最后一个添加的元素。这与 append 不同，后者在追加所有元素后，聊天区域的 View 不会切换到聊天区域的末尾或最后追加的元素，但仍保持不变在其先前的位置。

如何使 prepend 函数以与 append 相同的方式运行，聊天区域的 View 不会改成类似FB的load previous message功能？

这是一个示例代码，可以说明我的意思。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    .chatbox{
        border:1px solid #2a6496;
        height: 600px;
        margin-top:50px;
    }
    .chatbox div{
        height: 100%;
    }
    .rightP{
        border-left: 1px solid #2a6496;
    }
    .rightP .contents{
        border-bottom: 1px solid #2a6496;
        height: 70%;
    }
    .rightP .send{
        padding : 5% 5% 5% 5%;
        height: 30%;
    }

    #response{
        height: 200px;
        overflow-y: scroll;
        overflow-wrap: break-word;
    }

</style>
<script>
    function appendMessage()
    {
        var data = 'hello';
        var message = document.createElement('p');
        message.innerHTML = data;
        console.log(message.innerHTML);
        $('#response').append(message);
        $('#response').append($('.load'));
    }
    function prependMessage()
    {
        for(var $i = 0;$i<10;$i++)
        {
            var data = 'hello'+$i;
            var message = document.createElement('p');
            message.innerHTML = data;
            console.log(message.innerHTML);
            $('#response').prepend(message);
            $('#response').prepend($('.load2'));
        }
    }
</script>
<body>
<div class="container">
    <div class="chatbox">
        <div class="col-sm-8 rightP">
            <div class="row contents">
                <div class="row msg">
                    <div id="response" class="msg form-group">
                        <a onclick="return appendMessage()" class="load btn btn-default">Append</a>
                        <a onclick="return prependMessage()" class="load2 btn btn-default">Prepend</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

最佳答案

在 HTML 中，您的 onlick 中应该有 return:

<a onclick="return loadMessage();" class="load btn btn-default">Load More Msg</a>

在 JS 中，您需要将 return false 添加到您的函数 loadMessage 中。

var loadMessage = function(){
    var firstMessage = $messagesWrapper.find('> p:nth-child(2)');
    $.ajax({
        ....
        if(messages.length<10){
                   $('.load').hide();//hide the load button if remaining messages to load is <10
                }
        success: function(messages){
            $.each(messages, function() {
               prependMessage(this);
           });
       },
       ....
   });

   return false;
};

关于javascript - jQuery/JavaScript : How to prepend elements without going back to the top of last prepended element?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24157560/

29 4 0
文章推荐： html - 在另一个 DIV 内显示 DIV 的内联
文章推荐： ruby-on-rails - will_paginate 只显示上一页和下一页？
文章推荐： c# - 如何在一个foreach中显示两个表记录？
文章推荐： Ruby - 循环 IF x 次并更改条件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com