jquery - hide() 後の JQuery show()

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();
    });
});​

Answer 2

要素を上書きすると（削除.text()されるため）、次は表示する要素が見つからないためです..#idInput1$('#idInput1')

Answer 3

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