javascript - 两个输入元素和两个按钮上的 JQuery 类选择器

Question

我在两个输入文本元素(只读)和两个按钮上使用 JQuery，以便在单击按钮 1 时仅输入 1 应变为读/写。并且，当单击按钮 2 时，仅 输入 2 应变为读/写。并且当再次单击相应的按钮时，相应的输入应再次变为只读。但是无论单击哪个按钮，我的以下脚本都会更改两个输入的只读属性。我认为只应针对该特定输入触发一个事件，正如用户在此处解释的那样 here

注意:我知道我们可以使用 id 而不是类选择器，但在我的真实场景中，输入和按钮标签是通过循环动态生成的，数据来自数据库。因此，我们不知道每次会创建多少个这样的元素。而且，正如上述链接中的用户指出的那样，只应为相应的按钮触发一个单击事件。所以问题实际上是我们如何才能实现这种情况，因为下面给出的示例在这种情况下是行不通的。

HTML:

<table>
    <tbody>
        <tr>
            <td>
                <input class="txtInput" type="text" name="test1" value="test1val" readonly/>
            </td>
            <td>
                <input type="button" class="btnEdit" name="editName" value="Edit"/>
            </td>
        </tr>
        <tr>
            <td>
                <input class="txtInput" type="text" name="test2" value="test2val" readonly />
            </td>
            <td>
                <input type="button" class="btnEdit" name="editName" value="Edit" />
            </td>
        </tr>
    </tbody>
</table>

JQuery:

$(document).ready(function () {
    $('.btnEdit').click(function () {
        if ($('.txtInput').prop('readonly')) {
            $('.txtInput').removeAttr('readonly');
        }
        else {
            $('.txtInput').attr('readonly', 'readonly')
        }
    });
});

页面展示:

Answer 1

可以针对点击按钮的前一个TD，找到输入

$(document).ready(function () {
    $('.btnEdit').on('click', function () {
        $('table .txtInput').prop('readonly', true);
        var elem = $(this).closest('td').prev('td').find('.txtInput');
        elem.prop('readonly', function(_,state) { return !state });
    });
});

input[readonly] {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td><input class="txtInput" type="text" name="test1" value="test1val" readonly/></td>
            <td><input type="button" class="btnEdit" name="editName" value="Edit" /></td>
        </tr>
        <tr>
            <td><input class="txtInput" type="text" name="test2" value="test2val" readonly /></td>
            <td><input type="button" class="btnEdit" name="editName" value="Edit" /></td>
        </tr>
    </tbody>
</table>