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

使用jQuery和HTML

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

问题：首先，当你们点击一个按钮时，它工作正常，但若你们输入一个值，点击按钮，那个么红色边框应该被删除

$（'.mybutton'）。单击（函数（）{
如果（$（“.input”）.val（）.trim（）=''）
$（“.input”）.css（'border-color'，'red'）；
其他的
$（“.input”）.css（'border-color'，''）；
});










每次单击后循环每个输入
使用
.addClass（）
和
.removeClass（）
如果需要添加类或删除类，请使用此上下文引用要计算的当前输入

$（'.mybutton'）。单击（函数（）{
$（“.input”）.each（函数（）{
如果（$（this）.val（）.trim（）=''）
$（this.addClass（'border'）；
其他的
$（this.removeClass（'border'）；
})
});
.border{
边框颜色：红色；
}










每次单击后循环每个输入
使用
.addClass（）
和
.removeClass（）
如果需要添加类或删除类，请使用此上下文引用要计算的当前输入

$（'.mybutton'）。单击（函数（）{
$（“.input”）.each（函数（）{
如果（$（this）.val（）.trim（）=''）
$（this.addClass（'border'）；
其他的
$（this.removeClass（'border'）；
})
});
.border{
边框颜色：红色；
}









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

您应该做的是使用迭代匹配的元素，并使用
this
检查值/设置样式

e、 g


$（'.mybutton'）。单击（函数（）{
$（“.input”）.each（函数（）{
if（this.value.trim（）.length==0）
$（this.css（'border-color'，'red'）；
其他的
$（this.css（'border-color'，''）；
});
});









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

您应该做的是使用迭代匹配的元素，并使用
this
检查值/设置样式

e、 g


$（'.mybutton'）。单击（函数（）{
$（“.input”）.each（函数（）{
if（this.value.trim（）.length==0）
$（this.css（'border-color'，'red'）；
其他的
$（this.css（'border-color'，''）；
});
});









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

    $('.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>


函数validateInput（）{
如果（$（“.input”）.val（）.trim（）=''）
$（“.input”）.css（'border-color'，'red'）；
其他的
$（“.input”）.css（'border-color'，''）；
}
$（函数（）{
//JQuery“on”函数通常用于
//附加事件处理程序
$（'.mybutton'）。打开（“单击”，验证输入）；
$（'.input'）。打开（“输入”，验证输入）；
});
您需要为输入添加事件处理程序

    $('.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>


函数validateInput（）{
如果（$（“.input”）.val（）.trim（）=''）
$（“.input”）.css（'border-color'，'red'）；
其他的
$（“.input”）.css（'border-color'，''）；
}
$（函数（）{
//JQuery“on”函数通常用于
//附加事件处理程序
$（'.mybutton'）。打开（“单击”，验证输入）；
$（'.input'）。打开（“输入”，验证输入）；
});
由于您有多个.input类，因此必须遍历它们并检查每个输入是否有值

你可以按你期望的方式工作

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

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

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

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

你可以按你期望的方式工作

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

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

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