3

質問:外部のphpファイルが1回だけ追加されるように、.get()を.one()(または.live())と組み合わせて使用​​する適切な方法は何ですか?

最近の編集: ソリューション

<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回だけ追加できるようにする必要があります。これが私が望んでいるシナリオです

1)ダウンロードリンクをクリックします

2)downloads.phpが表示されます

3)エラーリンクがクリックされた

4)errors.phpがdownloads.phpの下に表示されます

5)ダウンロードリンクをもう一度クリックします

6)ページはdownloads.phpの一番上までスクロールします

.one()のドキュメントページの例と同じ機能が必要です。ここでは、すべてのdivを1回だけクリックできます。

また、 .one()と.live()jQueryの使用についても調べましたが、受け入れられた回答で使用されているアプローチが特に気に入りました。

以下に示すようにブールフラグを使用してイライラしましたが、同じリンクでの連続クリックを1つに制限するだけでした。したがって、1つをlink 1複数回クリックすると、ページ1.phpが1回だけ表示されますが、リンク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();
        });


}
});

アプローチとして私が気に入ったもう1つの点は、ページの名前を配列に追加し、その配列をチェックして、ページがまだ表示されていないことを確認することです。.push()を使用して配列をページ名で埋めることができましたが、その中の値を検索するときに行き止まりになりました。あなたがそれがどのように見えるべきかについての考えを持っているなら、それも非常に役立つでしょう。

core.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;


}
}

これが私の

callbacks.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 ファイルを 1 回だけ追加する適切な方法は何ですか?」

.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 に設定します。次に、 でラップ$.getしますif (!contentLoaded) { $.get ... }

そうすれば、$.get一度だけ実行されます。

ところで:$.oneイベントを要素にバインドするために使用されます。これは一度だけ実行され、それからそれ自体をアンバインドします。

于 2012-06-22T22:14:25.097 に答える