<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/