jquery - 如何将数据放入 fancybox 中？

Question

总的来说，我对 jQuery 完全是处女。 PHP 是我的菜，并且由于一般的编程知识，我或多或少地了解 javascript。我正在为一个音乐节做一些志愿者工作，并得到了一个完整的设计，我“只”必须实现 php 才能工作。

大多数事情都有效，但是有一个(或者实际上是，但另一个将在以后)我的 google-foo 似乎无法克服的大问题......

我列出了数据库中的一些数据。每行末尾都有一个删除按钮。如果我真的想删除(不是我做的)，那个删除按钮现在会打开一个带有确认信息的花式框。我似乎无法理解如何使用 fancybox...

这是每行末尾的删除按钮(还有很多花哨的 css 使其看起来不错......):

<a class="fadein dialog" href="#delete" title="Delete"></a>';

我有这个 javascript(其中，这应该是相关部分):

$(".dialog").fancybox({
            width           : 400,
            height          : 160,
            fitToView       : false,
            autoSize        : false,
            modal           : true,
            closeClick      : false
            });

又是这个 html:

<div id="delete" style="display:none; width:400px; overflow:hidden;">
<div class="alertwrap">
<h2><img src="images/shiftdelete.png" width="32" height="32" class="icon" alt="Delete" />Confirm deletion</h2>
<div class="content">
<span>Are you sure you want to delete?</span>
<a href="javascript:$.fancybox.close();" class="confirm">YES</a>
<a href="javascript:$.fancybox.close();" class="decline">No</a>
</div>

很容易将行的 id 作为打开 fancybox 的 id。但我找不到在 fancybox 中检索它的方法，以便我可以将它用于某些用途......

按钮的操作显然是假的，我只是将它们留在那里，同时试图了解在这里要做什么。否按钮是可以的，但是是按钮应该能够调用另一个带有后数据的 php 文件，至少有一个从原始文件中获取的 id ...

我的另一个问题是类似的，我想它可能会以相同的方式解决...我在每行上还有一个编辑按钮，它以与此确认对话框相同的方式打开一个表单。我需要用该行的数据填充该表单。我似乎真的不明白如何...

有什么建议吗？很高兴在上面加糖:)

Answer 1

参见示例here

示例代码:

$('a.btn-delete-row').click(function(){

    $('#delete').data('context', $(this));

    $.fancybox({
        width           : 400,
        height          : 160,
        fitToView       : false,
        autoSize        : false,
        modal           : true,
        closeClick      : false,
        href            : '#delete'     
    });    
});

$('a.confirm').click(function(){
    var $context = $('#delete').data('context')

    alert($context.attr('data-rowID'));    

    $.fancybox.close();   
    return false;
});

$('a.decline').click(function(){
    $.fancybox.close();    
    return false;
});

示例 html:

<a class="fadein btn-delete-row" href="javascript:void(0);" title="Delete" data-rowID="1">delete in row 1</a><br/>
<a class="fadein btn-delete-row" href="javascript:void(0);" title="Delete" data-rowID="2">delete in row 2</a>



<div style="display:none;">
    <div id="delete" style="width:400px; overflow:hidden;">
        <div class="alertwrap">
            <h2><img src="images/shiftdelete.png" width="32" height="32" class="icon" alt="Delete"/>Confirm deletion</h2>

            <div class="content">
                <span>Are you sure you want to delete?</span>
                <a href="javascript:void(0);" class="confirm">YES</a>
                <a href="javascript:void(0);" class="decline">No</a>
            </div>
        </div>
    </div>    
</div>