Javascript 如何为文件夹中的照片创建“加载更多”按钮？

我已经花了一整天的时间，但仍然不知道如何使用jquery创建LoadMore按钮，jquery将更改php脚本中变量的值，启动for循环并从我的照片文件夹中加载更多照片。 我的Jquery脚本是：

$(document).ready(function() {
    $("button").click(function(){
        $("php").attr({
            "$b" : "16"
        });
    });
});

我的php代码是：

$charnum = strlen($file);
$b = 8;
    $directory = "resource/galery/";
    if (is_dir($directory)) {
    if ($dh = opendir($directory)) {
        for ($i = 0; ($file = readdir($dh)) && $i < $b; ++$i) {
            if($file !="." && $file!=".."){
            echo '
            <div class="img">
            <a target="_blank" href="/resource/galery/'.$file.'">
            <img class="img-responsive" src="/resource/galery/'.$file.'">
            </a>
            <div class="desc">'.substr($file, 0, $charnum - 4).'</div>
            </div>';
        }
        }
        closedir($dh);
    }
}

$charnum=strlen（$file）；
$b=8；
$directory=“resource/galery/”；
if（is_dir（$directory））{
如果（$dh=opendir（$directory））{
对于（$i=0；（$file=readdir（$dh））&&$i<$b；++$i）{
如果（$file！=“&&&$file！=”）{
回声'
“.substr（$file，0，$charnum-4）。”
';
}
}
closedir（$dh）；
}
}

---

我想把$b从8换成更大的数字。或者也许有另一种方法可以做到这一点。谢谢。

我想你把事情搞混了，JavaScript和PHP在两个不同的世界中运行——一个在客户端，另一个在服务器端

因此，您不能“直接”更改JavaScript中的变量。您必须通过HTTP请求（如GET或POST请求）传递一个变量来实现这一点，然后PHP脚本将呈现一个可以在JavaScript中访问的响应

下面是一个可能的分页解决方案：

JS:

PHP（yourphpscript.PHP）：

//每页8幅图像
每页$8；
//“清理页面”为数字，默认为0“第一页”
$page=intval（是数字（$获取['page']）？$获取['page']：0）；
$charnum=strlen（$file）；
$directory=“resource/galery/”；
if（is_dir（$directory））{
如果（$dh=opendir（$directory））{
//循环到并包括请求的页面
对于（$i=0；（$file=readdir（$dh））&（$i%$perPage）您还可以包括您用于请求PHP的jQuery代码吗？这就是您要寻找的吗？您是否认为您的jQuery代码将修改它加载到的同一页面的PHP？PHP是服务器端的，并且在用户看到该页面后完成。如果您想再次使用PHP，您需要使用Ajax并进行修改对PHP页面的附加调用。它不起作用，因为我所有的JS、HTML和PHP都存储在一个文档中。
$(document).ready(function() {
  $("button").click(function(){
    // try to get current page, or start off with 0 and increment by one.
    var page = (parseInt($(this).data('page')) || 0) + 1; 
    // save current page as data state on the button
    $(this).data('page', page);

    // we call the PHP script and pass a GET variable which indicates
    // which page we want to load.
    $.get('yourphpscript.php?'+ $.param({page: page}), function(data) {
      // append the result from your PHP script to #result element
      $('#result').append(data);
    });
  });
});

// 8 images per page
$perPage = 8;

// sanitize page to be a number, default to 0 - the "first page"
$page = intval(is_numeric($_GET['page']) ? $_GET['page'] : 0);

$charnum = strlen($file);
$directory = "resource/galery/";
if (is_dir($directory)) {
  if ($dh = opendir($directory)) {
    // loop up to and including the requested page
    for ($i = 0; ($file = readdir($dh)) && ($i % $perPage) <= $page; ++$i) {
        // only output if we are on the requested page
        if($file !="." && $file!=".." && ($i % $perPage) == $page) {
          echo '
          <div class="img">
          <a target="_blank" href="/resource/galery/'.$file.'">
          <img class="img-responsive" src="/resource/galery/'.$file.'">
          </a>
          <div class="desc">'.substr($file, 0, $charnum - 4).'</div>
          </div>';
        }
    }
    closedir($dh);
  }
}

<div id="result">
  <!-- images go here -->
</div>
<button type="button">Load more</button>