Question

我正在尝试使用qtip2 jquery插件来制作内容很少的tooptips / balloon。这是他们的.js和.css文件：

我希望它能够处理来自mysql的php填充的表。我正在做这样的表：

 <tbody>
    <?php while($row = MySQL_fetch_array($result)): ?>
        <tr>
            <td title="lname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['last_name'])); ?>
                </div>
            </td>
            <td title="fname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['first_name'])); ?>
                </div>
            </td>    
            <td width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['u_name'])); ?>
                </div>
            </td>  
            <td width="100px">
                <div style="width:150px; overflow:hidden;">
                    <?php echo(htmlentities($row['skype_id'])); ?>
                </div>
            </td>
       </tr>
    <?php endwhile; ?>
</tbody>

所有丑陋的div都让它看起来更加一致。无论如何......这是工具提示的脚本：

        <script>$('td[title]').qtip({
                    show:'click',
                    hide:'unfocus',
                    content: {
                        text: "<?php echo(htmlentities($row['last_name'])); ?>"
                    }

                }); 
        </script>

问题是......我只能让它为每个带'title'的单元显示相同的friggin内容。我希望气球显示特定于每个$行的内容。知道我怎么能做到这一点吗？

Answer 1

根据documentation：

您还可以指定一个返回内容的函数在每个连续的节目事件上运行。此功能可以返回两者静态文本内容（文本或HTML）或延迟对象（请参阅下面）该函数以其作为目标元素的范围执行，同时包括事件和api参数。

所以你可以这样做：

content: {
    text: function() {return $(this).closest("tr").find("[title=lname]").text();}
}

这个想法是，从我们知道的this的目标元素范围（td[title]）开始，以某种方式生成工具提示的文本。由于标记中该文本的唯一实例位于td[title=lname]内，因此代码会找到并返回其文本。

qtip2气球和php表：每行不同的气球内容？

1 个答案: