0

这是我需要完成的工作：

基本上我有一张“地图”，上面有一些“点”；当一个点被点击时，我想加载另一个图像而不是其他一些点（点是链接）而不刷新页面。一种方法是获取 div 的显示：无，单击时隐藏（）当前图像（及其上的点）和淡入（）新图像，但我不想每次都加载所有图像该页面被访问。

问题：

当使用纯 PHP 时，它工作得非常好：当它在 'main.php' 上时，它会打开图像 '1-25.png'，当点击一个链接（点）时，它会打开 'main.php?m=地图名称”并打开“地图名称.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>";
}

更新\修复

我已经 $('#map').load('content.php'); 从 div.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/ )。它将为您节省很多麻烦。

Basicall 函数将内容加载到您选择的选择器中，例如：

$("#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 回答
0

如果我没记错的话，可能是 ajax 返回内容的链接不起作用。您应该使用live()来保持点击事件在 ajax 请求完成后仍然有效

$('a').live('click', function(){ 
//do something
});

编辑：

.live() 方法自 jQuery 1.7 起已被弃用，并已在 1.9 中删除。我们建议升级代码以改用 .on() 方法。例如，要精确匹配 $("a.foo").live("click", fn)，可以编写 $(document).on("click", "a.foo", fn)。有关详细信息，请参阅 .on() 文档。同时，jQuery Migrate 插件可用于恢复 .live() 功能。 live() 已移除

万一不管用，你可以把脚本放到函数中，以便在ajax完成时重新绑定它们

于 2013-08-06T14:25:44.193 回答
0

对我来说听起来好像 aniframe对你来说是很合理的。

然后你需要两个div：一个用于主地图，一个用于详细地图，iframe上面有 。然后您将能够刷新第二个 div 的内容而无需刷新整个页面。也可以从外部父页面的 iframe 内部执行 javascript/jquery，反之亦然。

这将是我首先要走的路。我相信没有 . 也是可能的iframe，但需要更多的编程工作。

于 2013-08-06T14:25:59.833 回答
0

尝试用这个替换你当前的点击事件：

$('#map').on('click', 'a', function(event) {
    $('#map').load($(this).attr('href'));
    event.preventDefault();
});

http://api.jquery.com/on/

于 2013-08-06T14:25:06.470 回答