问题:将 .get() 与 .one() (或 .live())结合使用以使外部 php 文件仅附加一次的正确方法是什么?
最近的编辑: 解决方案
<script>
$(document).ready(function(){
$('.tree li a').one("click", function() {
var currentAnchor = $('.tree li a').attr('href');
if(!currentAnchor){
var query = "page=1";
}
else
{
var splits = currentAnchor.substring(1).split('&');
//Get the section
var page = splits[0];
delete splits[0];
var query = "page=" + page;
alert ("page=" + page);
}
//Send the petition
$("#loading").show();
$.get("callbacks.php",query, function(data){
$("#content").append(data);
$("#loading").hide();
});
return false;
});
});
</script>
进一步来说:
我正在使用 Javascript 和 PHP 将一些外部 PHP 页面加载为我的主模板中的部分。
我正在使用 switch 和 append() ,因此包含的文件会不断附加。我需要每个文件只能附加一次。这是我希望发生的情况
1)点击下载链接
2) 出现downloads.php
3) 单击错误链接
4) errors.php 出现在 downloads.php 下面
5) 再次点击下载链接
6) 页面只滚动到 downloads.php 的顶部
我需要与 .one()文档页面上的示例相同的功能,其中每个 div 只能单击一次。
我还查看了Using .one() with .live() jQuery,我特别喜欢在接受的答案中使用的方法。
Iried 使用如下建议的布尔标志,但它所做的只是将我对同一链接的连续点击限制为一个。因此,如果我link 1多次单击它只会显示第 1.php 页一次,但是如果我单击链接 1,然后单击链接 2,然后再次单击链接 1,它将显示第 1.php 页,然后附加第 2.php 页并附加另一个第 1.php 页。
我开始认为 setInterval 是错误的,我可以将 .one() 用于整个checkAnchor()函数并将其绑定到<a>标签。我试过这个,但它也不起作用:(((
core.js - 使用 .one()
var currentAnchor = null;
//$(document).ready(checkAnchor);
//Function which chek if there are anchor changes, if there are, sends the ajax petition checkAnchor
$("a").one("click", function (){
//Check if it has changes
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
//if there is not anchor, the loads the default section
if(!currentAnchor){
query = "page=1";
}
else
{
//Creates the string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
var splits = currentAnchor.substring(1).split('&');
//Get the section
var page = splits[0];
delete splits[0];
var query = "page=" + page;
}
alert ("hello");
//Send the petition
$("#loading").show();
$.get("callbacks.php",query, function(data){
$("#content").append(data);
$("#loading").hide();
});
}
});
作为一种方法,我喜欢的另一件事是将页面名称添加到数组中,然后检查该数组以确保页面尚未显示。我设法使用 .push() 用页面名称填充数组,但是在查找其中的值时遇到了死胡同。如果你有一个想法应该是怎样的,那也会非常有帮助。
核心.js
///On load page
var contentLoaded;
$().ready(function(){
contentLoaded = false;
setInterval("checkAnchor()", 300);
alert (contentLoaded);
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
//Check if it has changes
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
//if there is not anchor, the loads the default section
if(!currentAnchor){
query = "page=1";
}
else
{
//Creates the string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
var splits = currentAnchor.substring(1).split('&');
//Get the section
var page = splits[0];
delete splits[0];
var query = "page=" + page;
}
alert ("hello");
//Send the petition
$("#loading").show();
alert (contentLoaded);
if (!contentLoaded){
$.get("callbacks.php",query, function(data){
$("#content").append(data);
$("#loading").hide();
});
alert (contentLoaded);
}
contentLoaded = true;
}
}
这是我的
回调.php
<?php
//Captures the petition and load the suitable section
switch($_GET['page']){
case "4100errors" :
include 'template/4100errors.php';
break;
case "4100downloads" :
include 'template/4100downloads.php';
break;
}
?>
还有我的主文件
4100.php
<?php
include 'template/header.php';
include 'template/4100menu.php';
include 'template/log.php';
include 'template/links.php';
include 'template/4100breadcrumbs.php';
?>
<div class="left-widget">
<div style="display:none; position:absolute; top:-9999; z-index:-100;">
<a href="4100.php?page=4100downloads"></a>
<a href="4100.php?page=4100errors"></a>
</div>
<div id="side-nav-bar" class="Mwidget">
<h3>Contents</h3>
<ul class="tree">
<li><a href="#4100downloads" class="links" >Downloads</a> </li>
<li><a href="#4100errors" class="links">Error Troubleshooting</a></li>
</ul>
</div>
</div>
<div id="content" style="margin-top:100px; margin-left:300px;">
<?
switch ($_GET['page'])
{
case "4100downloads": include 'template/4100downloads.php'; break;
case "4100errors": include 'template/4100errors.php'; break;
}
?>
</div>
</body>
</html>
4100dowloads.php
Downloads test page
4100error.php
Errors test page
您也可以在这里查看测试页面http://period3designs.com/phptest/1/4100.php