0

我有一个<table id="pickups">在/pages/home.php. index.php如果没有设置其他页面，则默认包含home.php。如果您单击该表的某个列中的元素 ( logfile.main )，则包含该表的#pickups-container 将.animate()达到一定的大小，并且新内容正在加载到.pickup-container 中，并且将在 -container 正下方淡入.main。

现在我确实想支持直接链接，所以如果你链接到website.tld/?pickup=name我希望#pickups-tableanimate()就像你在 -table 中单击一个logfile -element 时一样#pickups。

您可以在此处试用示例：

  1. 普通链接（您必须单击日志文件）：fortress.pwnz.it
  2. 直接链接（我希望动画在设置时自动发生$_GET['pickup']，就像单击表的日志文件列中的日志文件一样）：fortress.pwnz.it/ ?pickup=CTFCL-20130816-0132-openfire_lowgrens

这是我到目前为止得到的：

jQuery，下面的代码位于范围$(document).ready(function() { <scope> })内。

    var mainIsCollapsed = 0;
    var mainLastHeight = 0;

    var $_GET = {};
    document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function() {
        function decode(s) {
            return decodeURIComponent(s.split("+").join(" "));
        }
        $_GET[decode(arguments[1])] = decode(arguments[2]);
    });
    //if direct link was clicked
    if($_GET['pickup'] != null) {
        var pickup = $_GET['pickup'];
        alert('var pickup: ' + pickup);
        loadPickup(pickup);
    }



    //if td element is clicked
    $('#pickups td:first-child').click(function() {
        loadPickup($(this).attr('name'));
    });


    //fade out content and animate 'main' to its normal size
    $('div.main').click(function() {
        if($(':animated').length)
            return false;
        if(mainIsCollapsed == 1) {
            $('div.pickup').fadeOut(250);

            $(this).animate({
                height: mainLastHeight
            }, 600, function() {
                mainIsCollapsed = 0;
            });
        }
    });




    //animate table and fade in content
    var loadPickup = function(pickup) {
        alert(pickup);

        if($(':animated').length)
                return false;

        if(mainIsCollapsed == 0) {
            mainLastHeight = $('div.main').height();

            //collapse main frame
            $('div.main').animate({
                height:'50px'                    
            }, 600, function() {
                mainIsCollapsed = 1;
            });
            //load content
            $('div.pickup').load('/pages/pickup.php?pickup=' + pickup, function() {
                //fade in
                $('div.pickup').fadeIn(300);
                //some other code here for tooltips and such
            });
    }

问题是当使用直接链接时，该函数loadPickup(pickup)永远不会执行（alert(pickup)消息框永远不会弹出，并且似乎所有 jQuery 脚本都停止工作）。

文件：

  1. index.php加载上面的 jQuery/javascript
  2. index.php包括/pages/home.php
  3. index.php包含div.pickup加载新内容后将显示的内容
  4. /pages/pickup.php是加载到的内容div.pickup
  5. /pages/home.php包含.main容器（要动画的那个），在该容器中，#pickups表格位于

编辑

我试过loadPickup('CTFCL-20130816-0132-openfire_lowgrens');直接在$(document).ready()函数中调用，它也不会在那里调用它。相反，所有 jQuery 似乎都停止工作了。

我究竟做错了什么？

4

1 回答 1

0

问题的解决方案相当简单；我习惯用 obj-c 和 Java 编程。如果我将loadPickup()功能移动到它的顶部，$(document).ready()它就可以工作。如果它在其调用下方定义，则 jQuery 在尝试执行它时还不知道该函数。

于 2013-08-16T17:22:39.470 回答