javascript - 检查是否所有值都是字段

标签 javascript jquery html css

<div class="answer_1">
          <input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" />
          <input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" />
          <input id="3" class="3 inputs letter square border_black" maxlength="1" type="text" />
          <input id="4" class="4 inputs letter square border_black" maxlength="1" type="text" />
          <input id="5" class="5 inputs letter square border_black" maxlength="1" type="text" />
          <input id="6" class="6 inputs letter square border_black" maxlength="1" type="text" />
          <input id="7" class="7 inputs letter square border_black" maxlength="1" type="text" />
          <button id="continue" class="btn btn-primary" value="Continue">Weiter</button>
</div>

并且此输入的值是在单击图像时使用 JS 动态显示的字段(每个输入都是单击其他图像时的字段)。我如何检查所有值是否都是字段(我尝试使用 keyup 函数,但它仅在手动字段输入时有效,而不是使用 JS,如果是点击,则进行一些 css 更改(例如,当所有输入值都是字段,然后更改 div 的背景) 谢谢。

最佳答案

您可以像下面的例子一样使用 jquery 来执行 javascript 函数来检查填充的元素。有很多方法可以解决这个问题,这是其中一种非常简单的方法。

<body>
<div class="answer_1">
          <input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" />
          <input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" />
          <input id="3" class="3 inputs letter square border_black" maxlength="1" type="text" />
          <input id="4" class="4 inputs letter square border_black" maxlength="1" type="text" />
          <input id="5" class="5 inputs letter square border_black" maxlength="1" type="text" />
          <input id="6" class="6 inputs letter square border_black" maxlength="1" type="text" />
          <input id="7" class="7 inputs letter square border_black" maxlength="1" type="text" />
          <!--Added executing javascript function named check()-->
          <button id="continue" class="btn btn-primary" value="Continue" onClick="check()">Weiter</button>
</div>


<script>
//function definition
function check(){

//loop through the inputs using their numbers
for(var i = 1; i<7; ++i){

//check if the value is filled
if ($('#' + i).val()){

//do anything you want, here I alert the element id which is the number
alert(i);

//or change css
$($('#' + i).addClass('example');
$($('#' + i).removeClass('anotherexample');
}
}}</script>

<!--jquery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>

添加了一些评论

关于javascript - 检查是否所有值都是字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45689307/

相关文章:

javascript - 使用变量作为 JQuery 元素选择器

javascript - 如何打破从内部 promise 函数触发的循环?

javascript - 如何从 Javascript 调用访问伪元素样式?

jQuery 提交不触发

javascript - 扩展对象

html - 将一个类似 facebook 的按钮居中,使用 CSS/HTML 改变大小

javascript - Typescript:如何从浏览器控制台访问功能

javascript - 元素轮播 Bootstrap

html - CSS 下拉菜单 - 悬停消失

javascript - vuejs - 绑定(bind)到组件数据