Question

所以我有一个表格，其中每个单元格都是游戏的名称，当你点击它时，它需要在fancybox中显示单击该单元格的用户的结果（我使用表索引来获取GameID和Session用于获取userID的变量，用于从第二个PHP页面加载结果。

如果我第一次单击一个单元格，fancybox将不会显示任何内容，在我关闭fancybox并再次单击任何单元格后，它可以正常工作。我做错了吗？

这是整个javascript：

$(".jogos").fancybox({
        'hideOnContentClick': true,       
        'onComplete':function(element)
        {

            var gameIdx = $(element).index();
            var cateIdx  = $(element).parent().parent().index();
            var gameIdxPHP;
            var catIdxPHP;
            var gameID;
            var userId = '<?php echo $_SESSION['userID']; ?>'

            <?php 
                for ($i=1; $i<= count($categoryArray);$i++)
                {
                    for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
                    {
                        ?>
                        catIdxPHP = '<?php echo $i ?>' -1;
                        gameIdxPHP = '<?php echo $j ?>' -1;

                        if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
                        {
                            gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
                            $("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
                        }

                        <?php
                    }
                }
            ?>


        }
    });

HTML

<div style="display:none">
    <div id="data">
        <div id="graphic">
        </div>  
    </div>
</div>

链接的示例代码

<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >

Answer 1

你的fancybox的父级上显示：none，因为没有显示grafic。

如果你最初使用display：none，那么Grafic元素还没有在dom中。尝试使用clip：rect作为类，并使用fancybox回调添加/删除该类。

试试这段代码：

$('.jogos').fancybox({
        'onStart': function() {
            $("#data").removeClass('hidden');
        },
        'onClosed': function() {
            $("#data").addClass('hidden');
        }
});

CSS：

.hidden { 
  clip: rect(1px 1px 1px 1px);
  position: absolute;
)}

HTML：

<div>
  <div id="data" class="hidden">
    <div id="graphic">
    </div>  
  </div>
</div>

Fancybox仅在第二次点击后才有效

1 个答案: