php - 使用此 Facebook 风格 Lightbox - 请求 AJAX - 在页面上覆盖多个按钮

Question

我正在使用 David Walsh 的以下灯箱覆盖层来创建一个覆盖层，该覆盖层来自页面上多个按钮的点击功能。

http://davidwalsh.name/facebook-lightbox

我遇到的问题是，这段代码是为每页调用它而构建的。我需要这样做，以便在 php while 循环中创建多个按钮时，它会创建一个带有该 while 循环的对象 id 的隐藏输入字段和一个调用 javascript 的按钮输入字段。

这是我希望每次通过 while 循环创建的表单对象类型:

<input type="hidden" id="personName" value="postToAjax" /> 
<input type="button" value="Add a new person" id="add" class="submit" />

这是它调用的 Javascript:

<script>
    window.addEvent('domready',function(){

        document.id('add').addEvent('click',function(){

            ajaxFace = new LightFace.Request({
                url: 'ajax.php',
                buttons: [
                    { title: 'Add A Person', event: function() { 
                                            alert('hi!'); 
                                            }, 
                                            color: 'green' },
                    { title: 'Cancel', event: function() { this.close(); } }
                ],
                request: { 
                    data: { 
                        day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
                    },
                    method: 'post'
                },
                title: 'Add a name to this person'
            }).open();

        });
   });      
</script>

一些标题内容:

<link rel="stylesheet" href="../Assets/lightface.css" />
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"></script>
<script src="../Source/LightFace.js"></script>
<script src="../Source/LightFace.Request.js"></script>
    <!-- this was the code that in the html doc to begin with in DW's code -->
<script src="../Source/addpersonlightbox.js"></script>

我希望ajax将object_id发布到接收它的php文件中，然后我应该能够在该php脚本中执行其他所有操作。

我想我需要将js中的document.id更改为带有类或rel的内容。我希望得到一些关于放在这里的内容的帮助。

    request: { 
                data: { 
                    day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
                },
                method: 'post'
            },

此外，我认为我需要更改两个输入字段，以添加除 id 之外的其他内容以放入 php 变量。例如 id="personName"，但我不知道它是否应该是类或 del 或其他内容别的。然后我不知道这将如何与 javascript 一起工作。

提前致谢!

<input type="hidden" id="personName" value="postToAjax" /> 
<input type="button" value="Add a new person" id="add" class="submit" />

Answer 1

好吧。使用类，那么当你知道答案时为什么还要问呢？ :)

var attachLightFace = function() {

    new LightFace.Request({
        url: 'ajax.php',
        buttons: [
            {
            title: 'Add A Person',
            event: function() {
                alert('hi!');
            },
            color: 'green'},
        {
            title: 'Cancel',
            event: function() {
                this.close();
            }}
        ],
        request: {
            data: {
                name: this.getPrevious().get("value").clean()
            },
            method: 'post'
        },
        title: 'Add a name to this person'
    }).open();

};


document.getElements('button.submit').addEvent('click', attachLightFace);

这将附加到所有类型为提交的按钮，并且如果它们前面有输入，则该按钮将起作用，其值将传递到请求。

这样做的缺点是许多事件处理程序的占用空间。您还可以使用委托(delegate)，例如

document.id('container').addEvent('click:relay(button.submit)', AttachLightFace) - 这将添加一个事件来处理您拥有或可能拥有的任何按钮将来。