Question

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

大多数事情都有效，但是有一个（或实际上是，但另一个将来会用于）我的google-foo似乎无法克服的大问题......

我列出了一些数据库中的数据。在每行的末尾，有一个删除按钮。删除按钮现在打开一个fancybox，如果我真的想要删除（不是由我制作），确认。我不能为我的生活似乎明白如何处理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的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;
});

exsample 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>

如何将数据导入fancybox？

1 个答案: