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

因为使用.text()覆盖#idInput1元素（它被删除）所以下一个$('#idInput1')找不到要显示的元素..

Answer 2

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 3

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

隐藏（）之后的JQuery show（）

3 个答案: