Question

你好，实际上是如何制作一个“加载更多”＆＃39;用jquery按钮每个6 div？

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<a href="#" onclick="" > Load More .. </a>

然后显示其余的div 7,8,9等

感谢

Answer 1

在.append()中使用JQuery：

定义一个要在按钮单击时调用的函数，并在函数中添加div，如下所示：

function add(i) { $( "#container" ).append( "<div>"+i+"</div>" ); $( "#container" ).append( "<div>"+(i+1)+"</div>" ); $( "#container" ).append( "<div>"+(i+2)+"</div>" ); }

Answer 2

方法1：如果您的HTML中有固定数量的Div并且最初显示为6，然后通过单击按钮显示其余部分。

<div id="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div id="containerHidden" style="display: none">
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <a href="#" id="loadMore">Load More .. </a>

    <script type="text/javascript" language="javascript">
        $('#loadMore').click(function () {
            $('#containerHidden').show();
        });
    </script>

方法2：如果您想通过点击按钮每次动态追加N个div。

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<a href="#" id="loadMore">Load More .. </a>

<script type="text/javascript" language="javascript">
    $('#loadMore').click(function () {
        for (var i = 0; i < 3; i++) {
            var counter = parseInt($('#container div').length);
            counter++;
            $('#container').append('<div>' + counter + '</div');
        }
    });
</script>

每6个div加载更多

2 个答案: