0

これが私が成し遂げる必要があることです：

基本的に、いくつかの「ドット」が付いた「マップ」があります。ドットがクリックされると、ページを更新せずに、代わりに他のドット (ドットはリンク) を付けた別の画像を読み込みます。それを行う1つの方法は、divのdispaly:noneを取得し、クリックすると、現在の画像(およびその上のドット)を非表示()し、新しい画像をfadeIn()することでしたが、毎回すべての画像をロードしたくありませんページがアクセスされます。

問題：

プレーンな PHP で実行すると、完全に正常に動作します。「main.php」にある場合は画像「1-25.png」が開き、リンク (ドット) をクリックすると「main.php?m=」が開きます。 mapname」を入力して「mapname.png」を開きます。しかし、私はページを静止させ、コンテンツを (更新せずに) 変更したいと考えています。

いくつかのナビゲーション ボタンがある最初のページと、リンクのある別のページが読み込まれる div があります。ブラウザを更新せずに、リンクがクリックされたときに div 内のコンテンツを変更する必要があります。div の外でリンクやボタンを使用している場合はうまく機能しますが、div 内を移動しようとするとすぐに機能しません。

ここにいくつかのコードがあります: index.php

<a href="1.php">First</a><br>
<a href="2.php">Second</a><br>
<a href="3.php">Third</a><br>
<?PHP
include ('div.php');
?>

div.php

<div id="map"></div>

<script>
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}


        $(document).ready(function() {

        $('#map').load('content.php');


        $('a').click(function() {
            alert(getQueryVariable("m"));

            $.ajax({
                type : 'GET',
                url : 'content.php',
                data: 'm=' + getQueryVariable("m"),

                success : function(html) {
                    $("#map").html(html);

                }
            });
        });
    }); 
</script>

そして content.php

if (!isset($_GET['m']) || empty($_GET['m'])) {
    echo "<div id=\"map1\" style=\"position: relative; left: 0; top: 0;\">
    <img src=\"./inc/pics/1-25.png\" style=\"position: relative; top: 0; left: 0; max-height: 500; max-width: 700;\">
    <a id=\"1\" href=\"index.php?m=l50\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 180; left: 180;\"></a>
    <a id=\"2\" href=\"index.php?m=r50\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 280; left: 410;\"></a>
</div></div>";
} else if ($_GET['m'] == 'l50') {
    echo "<div id=\"map2\" style=\"position: relative; left: 0; top: 0;\">
    <img src=\"./inc/pics/2-50-left.png\" style=\"position: relative; top: 0; left: 0; max-height: 500; max-width: 700;\">
    <a id=\"3\" href=\"index.php?m=l25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 160; left: 110; \"></a>
    <a id=\"4\" href=\"index.php?m=tl25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 140; left: 350;\"></a>
    <a id=\"5\" href=\"index.php?m=bl25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 350; left: 350;\"></a>
</div></div>";
} else if ($_GET['m'] == 'r50') {
    echo "<div style=\"position: relative; left: 0; top: 0;\">
    <img src=\"./inc/pics/3-50-right.png\" style=\"position: relative; top: 0; left: 0; max-height: 500; max-width: 700;\" >
    <a id=\"6\" href=\"index.php?m=t25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 150; left: 50;\"></a>
    <a id=\"7\" href=\"index.php?m=b25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 380; left: 70;\"></a>
</div>";
}

更新\修正

div.php からを削除し $('#map').load('content.php'); 、クリック イベントを

    $('#map').on('click', 'a#1', function(event) {

        $("#map").load('map.php?m=l50');
        event.preventDefault();
    });
4

4 に答える 4

0

JQuery .load 関数は、この目的のために構築されています ( http://api.jquery.com/load/ )。それはあなたに多くの手間を省きます。

基本的にすべての関数は、選択したセレクターにコンテンツをロードします。例:

$("#myDiv").load('page_going_somewhere_else.php');

これをクリックイベントにラップして、次のように何かがクリックされたときに発生させることができます:

$("a#myLink").on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    var url = $(this).attr("href");
    $("#myDiv").load(url);                          
});

ロードしたページにデータを送信してチェックする必要がある場合は、次のようにデータを送信できます。

$("a#myLink").on('click', function(e){
   e.preventDefault();
   e.stopPropagation();
   var url = $(this).attr("href");
   $("#myDiv").load(url, {"myData":"myAnswer"});                            
});
于 2013-08-06T14:33:33.537 に答える