Javascript 访问<；车身>；在mediaboxAdvanced lightbox中找到表单的标记属性

我正在使用

HTML

、

Flash

和

Mootools-Javascript

框架构建我的投资组合网站。我决定使用Javascript和Cookie实现一个主题更改功能。当用户单击“更改主题”链接时，会出现一个灯箱，其中包含一个实时表单，允许您更改公文包上的主题

以下是表单的代码：

<div id="mb_inline" style="display: none; margin:15px;">
    <h3>Change Your Theme</h3>
    <form>
        <fieldset>
            <select id="background_color" name="background_color">
                <option  value="#dcf589">Original</option>
                <option value="#000FFF">Blue</option>
                <option value="#00FF00">Green</option>
            </select>
        </fieldset>
    </form>
</div>

现在，这只是一个测试功能，当下拉菜单更改时应触发该功能。然而，当窗体位于lightbox中时，似乎所有这些都不起作用！现在，如果我决定在lightbox之外运行表单，那么它工作得很好

似乎它甚至无法访问“背景颜色”元素

我错过什么了吗

如果你需要更多的例子，我会按需填写

提前谢谢大家

-克里斯托弗

更新（2010年4月27日-下午12:54）：

---

我对此进行了更多的研究，并对所有这些有两种理论

1-在

mediaboxAdv.js

文件中，有以下声明：

$(document.body).adopt(

这会阻止我访问身体的属性，比如“背景色”吗

2-lightbox是否可以单独将该表单显示为页面，因此我无法访问父页面的body标记

3-我是否需要按以下方式声明我的javascript文件

<div id="mb_inline" style="display: none; margin:15px;">
<!-- script declaration -->
<script type="text/Javascript" src="scripts/themeChanger.js"></script>
<!-- the form -->
<h3>Change Your Theme</h3>
<form>
    <fieldset>
        <select id="background_color" name="background_color">
            <option  value="#dcf589">Original</option>
            <option value="#000FFF">Blue</option>
            <option value="#00FF00">Green</option>
        </select>
    </fieldset>
</form>
</div>

改变你的主题
起初的
蓝色
绿色

更新（2010年4月27日-下午1:17）：

这是我正在尝试做的截图，如果它能帮助你们的话

---

我可能会在网站上发布一个链接，这样你就可以亲眼看到我想做什么。

这是一个模式窗口。在DOMREADY上运行代码是毫无意义的。当您将一些HTML放入div中时，没有DOMREADY。我假设lightbox/mediabox插件触发了一个onComplete事件，您可以将其挂接并使用它来实例化您的

themeChanger

没有看到您使用的插件的细节，但是在伪代码中

new mediaBox({
    width: nnn,
    height: nnn,
    title: "Change your theme",
    text: "your mark-up",
    onComplete: function() {
        new themeChanger(); // will set the listener which will work with the mark-up.
    }

});

如果窗口的内容是通过Request.HTML或任何其他方法加载的，则还应获得一个可插入的

onComplete

事件

我希望这是有道理的，祝你好运

这甚至不是一个类，而是一个使用元素原型的基于函数的插件（）。。。它看起来不支持加载内容上的事件。此外，它只支持一种适合在您的情况下提供内容的方法，

inline

，它依赖于DOM中已经隐藏的模式内容。也许这就是问题的根源——如果你看一下——隐藏内容是通过

innerHTML

复制的，它只使用

preload=$（urlspit[1]）。get（'html'）

然后在

startefect

函数中将模式窗口的内容设置为

preload

的值。此技术不会克隆您可能已经完成的事件，但moools中的HTML事件只是在元素存储中，因此，与元素UID绑定

也许您可以修改脚本以添加一个新选项，如

onComplete:$empty（）

，在

startefect

函数完成动画制作并添加到内容中后，您可以从该函数中调用该选项

---

祝你好运。这里我能给你的最好建议是——不要将这个插件用于对话窗口，它的功能过于繁杂，模块化程度不够——真是太遗憾了，因为mootools本可以在这里发挥巨大的作用，它不仅仅是一个DOM操作工具：）

经过广泛的研究和测试，我发现，多亏了，这只是简单地复制了，如果不是的话，克隆了隐藏的内容，然后显示出来，这样我的类就基本上没用了。换句话说，它将其视为一个外部页面，与原始html完全不同

至少看起来是这样

这基本上促使我创建了我自己的lightbox功能，它只允许我的主题转换代码工作

谢谢大家的帮助，非常感谢

我会留下这个问题，以防有人想出更好的答案

---

-克里斯托弗

我给你的答案是+1，因为你的回答帮助了我的决定，并给了我一些关于我真正的问题是什么的提示。被接受的答案是因为我没有正确阅读。呵呵，别担心，你让我联系到1337代表，这是一个很好的里程碑。我写这篇文章的前提是，您已经研究过代码，因为它相当简单。。。因此，也许我没有很好地总结它，但我看到了实际的代码行：）正如我所说，我引用：

隐藏的内容是通过innerHTML复制的，它只使用preload=$（urlspit[1]）。get（'html'）；然后在startefect函数中，将模式窗口的内容设置为preload的值，这意味着它复制innerhtml（与ID、类等一起，但没有事件）。Wow XD正是为了这个，对于我的错误，我将给你一个可接受的答案。我道歉，再次感谢你。
new mediaBox({
    width: nnn,
    height: nnn,
    title: "Change your theme",
    text: "your mark-up",
    onComplete: function() {
        new themeChanger(); // will set the listener which will work with the mark-up.
    }

});