在文本框中输入文本后如何显示按钮？

Question

我的桌子动态地装箱了。 我还创建了文本框，该文本框应在用户单击以在其中一个中输入文本后禁用所有其他文本框。 我正在努力的是要在我单击的文本框旁边创建按钮。 我当前的代码在同一位置显示按钮。 没关系，我单击按钮的哪个文本框始终显示在第一个文本框旁边。 HTML代码：

<tr>
    <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
    <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
    <td><input type="text" name="fname" id="fname">
        <input type="button" id="test" name="test" value="Save" onClick="testButton()" style="display: none">
   </td>
</tr>

jQuery代码：

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $("#test").show();
        } else {
            $(":text").removeAttr('disabled');
            $("#test").hide();
        }
    });
});

我不确定为什么按钮仅显示在第一行。 我的文本框功能正常。 如果我在一个文本框中单击，其他所有文本都会被阻止。 唯一的问题是我的按钮不是在我单击的文本框旁边创建的，而是第一个。 如果有人看到我的代码在哪里破损，请告诉我。 谢谢。

Answer 1

使用next()和prev()查找下一个和上一个元素，如下所示。 希望这会帮助你。

 $(".fname").keyup(function (e) { if ($(this).val() != '') { $(".fname").not(this).attr('disabled', 'disabled'); $(this).next(".test").show(); } else { $(".fname").removeAttr('disabled'); $(this).next(".test").hide(); } }); $(".test").click(function (e) { alert($(this).prev(".fname").val()) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>#TimeFormat(StartTime,'hh:mm tt')#</td> <td>#TimeFormat(EndTime,'hh:mm tt')#</td> <td> <input type="text" name="fname" class="fname"> <input type="button" class="test" name="test" value="Save" style="display: none"> </td> </tr> <tr> <td>#TimeFormat(StartTime,'hh:mm tt')#</td> <td>#TimeFormat(EndTime,'hh:mm tt')#</td> <td> <input type="text" name="fname" class="fname"> <input type="button" class="test" name="test" value="Save" style="display: none"> </td> </tr> </table> 

更新：

按钮：

<input type="button" class="test" name="test" 
     onclick="testButton(this)" value="Save" style="display: none">

JS功能

function testButton(btn) {
    var test = $(btn).prev('.fname').val();
    alert(test);
}

Answer 2

Azim的答案部分正确，“下一个”选择器不能是ID选择器，否则只能选择具有特定ID的特定文本框。 正确的方法是：

$(this).next("input").show();

示例： 这里

Answer 3

发生这种情况是因为所有按钮都具有相同的ID。 因此， $("#test")总是找到第一个按钮：

您需要使用类而不是id，如下所示：

<input type="button" class="test" value="Save" onClick="testButton()" style="display: none">

然后，您的举起事件应如下所示：

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $(this).next(".test").show();
        } else {
            $(":text").removeAttr('disabled');
            $(this).next(".test").hide();
        }
    });
});