我正在尝试实现页面的分页功能。我有自定义的帖子类型,我已经循环浏览并收集了这个页面的所有帖子。我显示第一篇文章并隐藏其余的文章,我有下一个/上一个按钮,可以显示下一篇文章和隐藏当前文章。它似乎在起作用,但我无法查看所有的帖子——只有2个。
这是我的代码:
<?php
$currProj = 1;
$countposts = 3;
?>
<?php if ($countposts>1) {
$prevID = $currProj - 1;
if ($prevID <= 0) {
$prevID = $countposts;
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php } else {
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php
//$currProj = $prevID;
}
echo $currProj; //This outputs 3 where it should be 1
$nextID = $currProj + 1;
if ($nextID > $countposts) {
$nextID = 1;
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php } else {
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php
//$currProj = $nextID;
}
} ?>
javascript函数工作正常,问题似乎是$currProj变量。我认为问题出在标记中的onClick属性上——有没有更好的方法可以让onClick事件给我的变量一个不同的值?或者一种检查该链接是否已被点击的方法,然后给currProj提供prevID/nextID的值?
我已经被这件事困扰了一段时间,似乎没有任何进展。如有任何帮助,我们将不胜感激。
上面的代码似乎将服务器端发生的事情和客户端发生的事情混为一谈。任何用<?php
包装的东西。。。?>
将在服务器上执行,然后以HTML形式发送到客户端——例如,这一行:
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
将最终发送到客户端,并解释所有PHP:
<a class="btn-previous" href="javascript:showProject(1,3)" onclick=""> < Previous </a>
这里的关键是,当你点击时,你不是在重新运行PHP——客户端对PHP是完全不可知的。每次单击"上一步"按钮时,其href
属性仍为javascript:showProject(1,3)
。
您有两种选择;也就是说,每当你点击下一个/上一个按钮时,你可以回到服务器,让它重新呈现页面,方法是将这些变量作为参数添加到页面中,例如,从URL和链接中获取当前项目,如下所示:
$currProj = ( $_REQUEST['currProj'] ? $_REQUEST['currProj'] : 1 );
...
<a class="btn-previous" href="<?php echo '[your_url_here]?currProj=' . $prevID ?>">
然而,看起来您有兴趣在不再次ping服务器的情况下完成此操作。在这种情况下,您需要在javascript中存储、引用和更新这些变量。可能有一千种方法可以做到这一点;接近你想要做的事情是让你的showProject
函数不带参数,而是根据当前项目的价值来计算它需要做什么,比如
var currProj = <?php echo $currProj; ?>; // this initializes the JS variable currProj from whatever it is in PHP when the server sends the page contents
var countposts = <?php echo $countposts; ?>; // initialize this too
var showPrevProject = function showPrevProject() {
// hide the current project using jQuery; assumes the DOM element you want to hide is given ID #project-[currProj]
$('#project-' + currProj).hide();
// Update the current project variable in JS; scope should update globally
currProj = currProj - 1;
if (currProj === 0) { currProj = countposts; }
// Now show that element
$('#project-' + currProj).show();
}
然后在您的链接中,您可以根据需要使用showNextProject
或showPrevProject
。
不过,更一般地说,最好将javascript作为一个单独的文件,并注册事件处理程序来处理这类事情。我还建议您查看jQuery,它是一个功能强大的库,可以极大地简化对DOM元素的访问和操作。
创建一个HTML隐藏输入来存储这些值怎么样?
<input type="hidden" value="<?php echo $currProj ?>" id="currProj">
因此,您可以使用javascript或jQuery在客户端访问和修改它。如果你想要一个服务器端的解决方案,你可以使用ajax和POST或GET请求。
也许这不是你想要的(修改php属性),我误解了你。如果是你的情况,请告诉我。