1

私はJavaScriptの初心者なので、いくつかのテクニックを学ぶためにここにいます。コード内に無限の Ajax スクロールを実装しようとしています。これは私のphpページです：

<div class="row row-sm padder-lg ">
<?php
foreach ($top->feed->entry as $key => $value) 
{
    $value->title->label = str_ireplace( "- ".$value->author->label, "",  $value->title->label);
    if($key >= $this->config->item("items_top"))
        return false;
    $image = $value->image[2]->label;
    if($image == '')
        $image = base_url()."assets/images/no-cover.png";
    $image = str_ireplace("170x170", "200x200", $image);
?>      
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="item">
        <div class="pos-rlt">
            <a onclick="get_more('<?php echo addslashes($value->title->label); ?>','<?php echo addslashes($value->author->label); ?>','<?php echo $image; ?>'); ?>');"  href="#">           
                <div class="item-overlay opacity r r-2x bg-black">
                    <div class="center text-center m-t-n">
                        <i class="icon-control-play i-2x"></i>
                    </div>                      
                </div>
                <a href="#">
                    <div class="r r-2x img-full" style="background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;">
                        <div style="height:180px;overflow:hidden;"></div>
                    </div>
                </a>
             </a>
        </div>

    </div>
</div>
<?php
}
?>
<script>
$(".removehref").attr("href","#");
</script>

私は目的のためにこの jQuery を使用することに決めました: Infinite AJAX Scroll 例では、これは私がやるべきことです:

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
</div>

<div id="pagination">
  <a href="page1.html">1</a>
  <a href="page2.html" class="next">2</a>
</div>

簡単でシンプルですが、私の場合はそうではありません。実際、コンテナはより複雑です。内部にループがあります。どうすればよいですか? そして、ページネーションはどうですか？

編集 示唆されているように、これは上記の jQuery を使用しない場合に適していますが、使用について混乱しています。

foreachループをに使用するにはどうすればよいfunction doSomething() {ですか?

 <script>
        $(document).scroll(function(e){
            // grab the scroll amount and the window height
            var scrollAmount = $(window).scrollTop();
            var documentHeight = $(document).height();
            // calculate the percentage the user has scrolled down the page
            var scrollPercent = (scrollAmount / documentHeight) * 100;
            if(scrollPercent > 50) {
                // run a function called doSomething
               doSomething();
            }
            function doSomething() {
                // do something when a user gets 50% of the way down my page
            }
        });
</script>
4

1 に答える 1

1

ニーズに合わない場合は、独自に作成することをお勧めします。それらはそれほど複雑ではありません。

通常、このような場合、2 つのファイルがあります。

  1. AJAX 関数を含む HTML ページ
  2. AJAX からの呼び出しを受信し、値を返すサーバー上の PHP スクリプト

そのため、サーバー上のコンテンツを取得するコードを PHP スクリプトに格納します。次に、クリックするボタン、または AJAX 関数を自動的に呼び出し、サーバー上の PHP スクリプトに要求を送信し、結果を AJAX に返し、ページに追加するテストを用意します。

AJAX 呼び出しについては、http ://api.jquery.com/jquery.post/をご覧ください。

最後に達したときに自動的にさらに読み込むには、jQuery を使用.height()してページの高さを取得し、ページ.scrollTop()の現在の位置に対してテストします。scrollTopが と等しい (または大きい) 場合は、heightAJAX 関数を呼び出します。

于 2015-01-31T19:45:24.063 に答える