JQuery show() 在 hide() 之后

Question

HTML:

<table id="table1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td class="table1column1"><input type="text" id="idInput1" /></td>
        <td class="table1column2"><input type="text" id="idInput2" /></td>
        <td class="table1column3"><input type="text" id="idInput3" /></td>
        </tr>
</table>
<button>Hide-Text-Show</button>

JQuery:

$(document).ready(function() {
    $('button').click(function() {
        $('#idInput1').hide();
        $('.table1column1').text('Test');
        $('#idInput1').show();
    });
});

http://jsfiddle.net/QNxyG/

我不明白为什么当我在 td 元素中添加文本时，show() 方法不起作用？

谢谢

Answer 1

http://jsfiddle.net/QNxyG/4/

使用 .text() 可以覆盖示例中的任何内容...因此输入不再存在

HTML

<table id="table1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td class="table1column1"><span class="text" style="display:none;"></span><input type="text" id="idInput1" /></td>
        <td class="table1column2"><span class="text" style="display:none;"></span><input type="text" id="idInput2" /></td>
        <td class="table1column3"><span class="text" style="display:none;"></span><input type="text" id="idInput3" /></td>
    </tr>
</table>

<button>Hide-Text-Show</button>

jQuery

$(document).ready(function() {
    $('button').click(function() {
        var input = $('#idInput1');
        var text = input.parent('td').find('.text');
        text.text('text');
        text.toggle();
        input.toggle();
    });
});​