3

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

4

2 回答 2

3

“将 .get() 与 .one() (或 .live())结合使用以使外部 php 文件仅附加一次的正确方法是什么?”

.one()live()真的没什么关系$.get。它们仅用于事件处理。

如果您打算按50ms原样运行代码,但想替换当前内容,请使用.html()代替.append().

$("#content").html(data);

这将覆盖旧内容。


我假设您已经意识到这一点,但可以肯定的是,您的代码会因此而间隔运行......

$().ready(function(){
    setInterval("checkAnchor()", 50); // better--> setInterval(checkAnchor, 50);
});

如果您只想在文档加载时使用一次,请执行此操作...

$(document).ready(checkAnchor);
于 2012-06-22T22:13:57.427 回答
2

只需使用布尔标志来确定您是否加载了数据。在页面加载时将其设置为 false,并在调用后将其$.get设置为 true。然后,$.getif (!contentLoaded) { $.get ... }.

这样,您将$.get只执行一次。

顺便说一句:$.one用于将事件绑定到一个元素,该元素将只执行一次,然后将其与它自身解除绑定。

于 2012-06-22T22:14:25.097 回答