Question

我有这样的结构。在按钮上单击jquery代码，如果字段为空，则使输入的边框为红色。第一排一切正常。在其他行中，即使我输入有效值，按钮点击后行边框也会变为红色。

＆＃13;

$('.btn-submit').click(function(){
  var value = $(':input').val();
  if(!value.length) {
    $(this).parents('.row').find(':input').css('border-color','#f00');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
  <input>
  <button class='btn-submit'>Check</button>
</div>
<div class='row'>
  <input>
  <button class='btn-submit'>Check</button>
</div>
<div class='row'>
  <input>
  <button class='btn-submit'>Check</button>
</div>

＆＃13;

Answer 1

改变你的JS代码：

$('.btn-submit').click(function(){
    var value = $(this).parent().find('input').val();
    if(!value.length) {
        $(this).parents('.row').find(':input').css('border-color','#f00');
    }
});

您的问题：

您选择所有<inputs/>而不是最接近的。

Answer 2

试试这个：

$('.btn-submit').click(function(){
        var value = $(this).parent().find("input").val();
        if(!value.length) {
            $(this).parent().find(':input').css('border-color','#f00');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='row'>
 <input>
 <button class='btn-submit'></button>
</div>
<div class='row'>
 <input>
 <button class='btn-submit'></button>
</div>
<div class='row'>
 <input>
 <button class='btn-submit'></button>
</div>

Answer 3

点击任何按钮时，它会检查第一个 <input>的值。

更改此行：

var value = $(':input').val();

对此：

var value = $(this).prev(":input").val();

这应该直接在按钮之前选择<input>元素。

另一个提示：您似乎尝试使用jQuery查找父的子输入。相反，您可以使用类似prev()的内容找到兄弟（这将适用于您的情况）。

Answer 4

您的问题是您正在查看所有输入，而不仅仅是按钮的兄弟。请尝试使用此JavaScript：

$('.btn-submit').click(function(){
    var value = $(this).parent().find('input').val();
    if(!value.length) {
        $(this).parents('.row').find(':input').css('border-color','#f00');
    }
});

Here is the fiddle

检查输入字段的值

4 个答案: