Question

使用jQuery和HTML

当用户点击按钮时，我只想在值为空时放置红色边框。否则不要放边框。

问题：首先当你点击一个按钮它工作正常，但是如果你输入一个值，然后按下按钮，应该删除红色边框

＆＃13;

$('.mybutton').click(function() {
  if ($(".input").val().trim() == '')
    $(".input").css('border-color', 'red');
  else
    $(".input").css('border-color', '');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

＆＃13;

Answer 1

由于您有多个.input类，因此必须遍历它们并检查每个输入是否具有某个值。

JSFiddle可以按预期的方式运作。

$(function () {
  $('.mybutton').click(function () {

    $(".input").each(function () {

      if ($(this).val().trim() == '')
        $(this).css('border-color', 'red');
      else
        $(this).css('border-color', '');
    });
  });
});

Answer 2

每次点击后循环每个输入
使用.addClass()和.removeClass()
如果需要添加类或删除类

$('.mybutton').click(function() {
  $(".input").each(function() {
    if ($(this).val().trim() == '')
      $(this).addClass('border');
    else
      $(this).removeClass('border');

  })


});

.border {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

Answer 3

您目前正在使用选择器.input选择所有输入。当您执行此操作并访问该值时，它将返回第一个选定元素的值。（您会注意到突出显示的工作原理基于第一个输入的值）。

您应该做的是使用.each遍历匹配的元素，并使用this检查值/集样式。

e.g。

$('.mybutton').click(function() {
  $(".input").each(function() {
    if (this.value.trim().length === 0)
      $(this).css('border-color', 'red');
    else
      $(this).css('border-color', '');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

您还应该查看required attribute这是一种更简单的显示必填字段的方法。

Answer 4

您需要为输入添加事件处理程序。

    $('.input').on("input", function () {
         if ($(".input").val().trim() == '')
             $(".input").css('border-color', 'red');
        else
             $(".input").css('border-color', '');
    });

你可以更进一步，把它放在一个函数中。像这样的东西

<script>
function validateInput() {
    if ($(".input").val().trim() == '')
        $(".input").css('border-color', 'red');
    else
        $(".input").css('border-color', '');
}

$(function () {
    // The JQuery "on" function is generally preferred for 
    // attaching event handlers
    $('.mybutton').on("click" ,validateInput);
    $('.input').on("input", validateInput);
});
</script>

在输入上单击jquery时添加红色边框

4 个答案: