jquery - 如何在 div 或其他内容中嵌入表格行并且不破坏 jQuery fadeIn 函数？

Question

我有一个非常具体的问题。

我想使用 fadeIn、fadeOut 函数插入特定代码，但如果我使用嵌入 div 标签的 tr 和 td 标签，则该代码不起作用。

我有这个 JS 部分的代码:

var registrationPart = $('div.registration-part');
var loginPart = $('div.login-part');

$('span.logreg.log').click ( function () {

                registrationPart.fadeOut("fast");
                loginPart.fadeIn("slow");

}

这在 html 中:

<table class="table">
    <div class="registration-part">
        <tr>
                  <td>registration</td>
            </tr>
    </div>
    <div class="login-part">
        <tr>
                  <td>login</td>
            </tr>
    </div>
</table>

因此，如果 div 内有 tr、td 标签，则 fadeIn、fadeOut 不起作用。如果我用 div 或 spans 替换它们，一切都会正常。

有没有办法离开 tr,td ，这样我就不需要为 div 制作特定的样式表，所以它看起来像 tr,td 。

提前致谢。

Answer 1

您拥有的是无效的 HTML，因此它不会按照您期望的方式呈现。你不能输入 <div>里面 <table>并让它包含<tr>元素；您可以包括 <div>里面 <td>元素，但这并不能真正帮助你。

如果要定义表的单独部分，请使用 <tbody>标签:

HTML

<table class="table">
    <tbody class="registration-part">
        <tr>
            <td>registration</td>
        </tr>
    </tbody>
    <tbody class="login-part">
        <tr>
            <td>login</td>
        </tr>
    </tbody>
</table>

JavaScript

var registrationPart = $('tbody.registration-part');
var loginPart = $('tbody.login-part');

$('span.logreg.log').click ( function () {
    registrationPart.fadeOut("fast");
    loginPart.fadeIn("slow");
}

如果你看一下 this jsFiddle使用原始 HTML 并使用 Firebug 检查表格，您会注意到 <div>元素位于表格之前且为空，并且不包含您希望它们包含的行。