时间戳

首页 > 解决方案 > 如何将第 1 天的 css 类分配给每个非空输入字段

javascript - 如何将第 1 天的 css 类分配给每个非空输入字段

问题描述

有人可以解释一下如何为这个函数 day1 分配一个本地 CSS 定义吗？以及
如何将 css 类分配给每个非空输入字段？

我已经尝试过下面的代码

function day1(){
  $currentDayColor = 'blue';
     document.getElementById('dayone').value = Date();
     $('input:not(:disabled):not([readonly])').each(function() {
     if (($(this).val() == "") || ($(this).val) == " ") 
       {
           $(this).css('color', 'blue');

       }
     if (($(this).val() !== "") && ($(this).val) !== " ") {$(this).addClass('classPreviousValue2');}

});
    $('select:not(:disabled):not([readonly])').each(function() {
    if (($(this).val() == "") || ($(this).val) == " ") {$(this).css('color', 'blue');}
   if (($(this).val() !== "") && ($(this).val) !== " ") {$(this).addClass('classPreviousValue2');}
});
}

如何将 CSS 类分配给每个非空输入字段。

标签： javascriptjquerycss

解决方案

最简单的做法是为change每个回调添加一个事件回调，input并在回调中测试该值并根据需要应用或删除该类。

// Set up a change event handler for all the inputs
$("input.styledByValue").on("change", function(){
  $(this).val() === "" ? $(this).addClass("hasNoValue") : $(this).removeClass("hasNoValue");
});
.hasNoValue { border:2px solid red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>

如果您需要在特定时间一次检查所有字段，则需要通过添加循环来更改相同的代码。

$("button").on("click", function(){
  // Loop over all the inputs
  $("input.styledByValue").each(function(){
    $(this).val() === "" ? $(this).addClass("hasNoValue") : $(this).removeClass("hasNoValue");
  });
});
.hasNoValue { border:2px solid red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
Field: <input class="styledByValue"><br>
<button>Check Fields</button>

推荐阅读