关于jq同一个name下，显示一个，隐藏其他元素问题

范范

今天工作总，碰见了很让人费解的问题，就是在一个table列表中，增加点击一个按钮，显示后面内容，然后再点击其它列的按钮，显示后面内容，并隐藏其他相同内容，问题列表如下：
我需要实现的是，点击修改，显示本修改后面的文本框，以及按钮，然后点击另一个修改时，显示本修改后面内容，并隐藏其他列的文本框与后面的按钮
我的代码如下，但是未实现，
table代码：

[C#] 纯文本查看 复制代码

<table class="table table-page" id="grid">
                <thead>
                    <tr>
                        <td style="width:40px">分类id</td>
                        <td style="width:100px">分类名称</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    
                    <tr>
                        <td>3</td>
                        <td>管理类</td>
                        <td><button type="button" class="btn btn-warning" data-action="del" data-id="3">删除</button>
                            <button type="button" class="btn btn-success" data-action="edit">修改</button>
                            <div style="display: none; " name="editTypeName">
                            <input class="form-control short" type="text" value="管理类">
                            <button type="button" class="btn btn-success" data-action="save" data-id="3">修改</button></div></td>
                    </tr>
                    
                    <tr>
                        <td>2</td>
                        <td>财会类</td>
                        <td><button type="button" class="btn btn-warning" data-action="del" data-id="2">删除</button>
                            <button type="button" class="btn btn-success" data-action="edit">修改</button>
                            <div style="display: none; " name="editTypeName">
                            <input class="form-control short" type="text" value="财会类">
                            <button type="button" class="btn btn-success" data-action="save" data-id="2">修改</button></div></td>
                    </tr>
                    
                    <tr>
                        <td>1</td>
                        <td>销售类2</td>
                        <td><button type="button" class="btn btn-warning" data-action="del" data-id="1">删除</button>
                            <button type="button" class="btn btn-success" data-action="edit">修改</button>
                            <div style="display: none; " name="editTypeName">
                            <input class="form-control short" type="text" value="销售类2">
                            <button type="button" class="btn btn-success" data-action="save" data-id="1">修改</button></div></td>
                    </tr>
                    
                </tbody>
            </table>

js代码：

[JavaScript] 纯文本查看 复制代码

$('#grid tbody').delegate('button[data-action="edit"]', 'click', function () {
        $this = $(this);
        $('div[name="editTypeName"]').each( function(index, item){
            $(this).attr('stype', 'display: none;');
        });
        $this.next().attr('style', 'display: inline-block;');
    });

范范

我的想法是，先隐藏全部的相同name的div，然后再显示当前点击的，就是没有实现隐藏，但是也没有错误

站长苏飞

我只是路过打酱油的。