Javascript 仅对上次加载的项目设置动画（ajax loadmore）

我得到了一个页面，其中显示了一些项目，当你按下一个按钮，更多的项目加载。包装项目的整个div有一个类，使其具有动画效果

我的问题是：

当您按下按钮时，整个脚本将通过ajax再次加载（在查询中增加了一个限制），因此所有脚本都将再次动画化

是否可以仅使新加载的项目具有动画效果？也许是通过计算加载了哪些新项目或其他什么

我真的不知道该怎么做，也许有人能在路上帮我

动画类称为：FadeIn

我的php脚本：

<?PHP
class Connection {
    // Configure Database Vars
    private $host     = 'localhost';
    private $username = 'name';
    private $password = 'pass';
    private $db_name  = 'db';
    public $dbase;

    function __construct() {
        // Create connection
        $db = new mysqli($this->host, $this->username, $this->password, $this->db_name);

        // Check connection
        if ($db->connect_errno > 0) {
            die('Unable to connect to the database: '.$db->connect_error);
        }

        $this->db = $db;
    }

    public function query($query) {
        $db = $this->db;
        $this->db->query('SET NAMES utf8');
        if (!$result = $this->db->query($query)) {
            die('There was an error running the query ['.$db->error.']');
        } else {
            return $result;
        }
    }

    public function multi_query($query) {
        $db = $this->db;
        if (!$result = $this->db->multi_query($query)) {
            die('There was an error running the multi query ['.$db->error.']');
        } else {
            return $result;
        }

    }

    public function real_escape_string($value) {
        return $this->db->real_escape_string($value);
    }

    public function inserted_id() {
        return $this->db->insert_id;
    }
}

$conn = new Connection;

//  Websites
$web                = "SELECT * FROM `name` WHERE catid = 9 AND state = 1 ORDER BY ordering LIMIT 0,".$_POST['limit']."";
$webcon             = $conn->query($web);
$webcr              = array();
while ($webcr[]     = $webcon->fetch_array());

foreach($webcr as $website){
    $web_images = $website['images'];
    $web_imgs = json_decode($web_images);

    if($website['title'] != ''){
        if($web_imgs->{'image_intro'}){
            $weboverzicht .= '
            <div class="col-md-4 wow fadeIn" data-wow-duration="2s" style="padding:0px">
                <div class="post">
                    <div class="post-heading">
                        <a style="max-height: 220px;" class="post-image" href="'.$website['alias'].'.html">
                            <img class="websiteimg" src="cms/'.$web_imgs->{'image_intro'}.'" class=""  alt="post" />
                        </a>
                    </div>
                    <div class="post-body" style="min-height:70px;border:none;">
                        <a href="'.$website['alias'].'.html"><h5>'.$website['title'].'</h5></a>
                        <p class="lijnhoogte">'.strip_tags($website['introtext']).'</p>
                        <p class="bekijkproject2"><a class="infolink" href="'.$website['alias'].'.html">Bekijk project</a></p>
                    </div>
                </div>
            </div>';    
        }else{
            $weboverzicht .= '
            <div class="col-md-4 wow fadeIn" data-wow-duration="2s"  style="padding:0px">
                <div class="post">
                    <div class="post-heading">
                        <a style="max-height: 220px;" class="post-image" href="'.$website['alias'].'.html">
                            <img class="websiteimg" src="image.jpg" class=""  alt="post" />
                        </a>
                    </div>
                    <div class="post-body" style="min-height:70px;border:none;">
                        <a href="'.$website['alias'].'.html"><h5>'.$website['title'].'</h5></a>
                        <p class="lijnhoogte">'.strip_tags($website['introtext']).'</p>
                        <p class="bekijkproject2"><a class="infolink" href="'.$website['alias'].'.html">Bekijk project</a></p>
                    </div>
                </div>
            </div>';    
        }
    }
}
echo $weboverzicht;
?>

熟悉抵销

二,

---

您的基本问题是，您正在使用“限制而不偏移->增加限制”并再次加载所有对象。使用偏移量跳过以前的结果。另外，“loadnews.innerHTML=data；”正在替换容器中的所有内容。考虑使用AppDead子。在您的例子中，您可以在每个ajax之后创建额外的容器，并将其写入各个容器的innerHTML中。您可以举一个例子来说明您的意思吗@好了，开始有意义了。作为抵销，我使用已公布的限额，对吗？我还使用0吗？限制是要读取的db行数，偏移量->索引从何处开始。每次应将偏移量增加3。Limit是const 3yes，但每次按下按钮时，3都会增加到

Limit

，因此我可以使用偏移量“$\u POST['Limit']”。对吗？代码给出了一个错误，（请查看与MySQL服务器版本对应的手册，以了解在第1行“OFFSET 78”附近使用的正确语法）但是每次我按下按钮它都会增加3，所以我应该能够使用limit作为偏移值。您的javascript正在工作，但正如您所说，它会再次加载所有内容。因此，前3个项目不会设置动画，而是重新加载所有项目，而不是添加3个新项目。使用偏移量时，会出现sql语法错误。如何在查询中使用偏移量？

(function(){
/*
Meer websites laden
*/
var limit = 3;

$('#loadmore').click(function() {
    limit += 3;

    ajax();

});

var posts = document.getElementById('loadnews');

function ajax() {
    $.ajax({
    url: 'includes/loadmore.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadnews.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();
}());

success: function(data){
    var newWrapper = document.createElement('div')
    //add class to newWrapper or whatever
    newWrapper.innerHTML=data;
    loadnews.appendChild(newWrapper)
}