问题:将 .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