Question

当所有li元素都具有“ valid”类时，我想console.log（）消息。目前其通过keyUp函数连接到我的输入。我下面的jQuery代码不起作用。谢谢

HTML：

<input class="confirmPwInput" type="password" name="confirm_password">
<input class="newPwInput" type="password" name="new_password">

<ul id="#pswd_info">
  <li id="letter" class="invalid">At least
    <strong>one letter</strong>
  </li>
  <li id="capital" class="invalid">At least
    <strong>one capital letter</strong>
  </li>
  <li id="number" class="invalid">At least
    <strong>one number</strong>
  </li>
  <li id="length" class="invalid">Be at least
    <strong>10 characters</strong>
  </li>
  <li id="match" class="invalid">
    <strong>Passwords must match</strong>
  </li>
</ul>

Javascript：

$('.newPwInput,.confirmPwInput').keyup(function () {
  $('#pswd_info li').each(function(){
    if($(this).hasClass('valid')){ 
      $(this).addClass('valid')
    }
  });
});

Answer 1

在您的标记中搜索未设置li类的.valid标签。如果不存在，则所有li都被视为有效。

if($('li:not(.valid)').length === 0) {
   // Everything's valid
}

编辑：如果您不想检查页面上的全部 li标签，请更详细地说明元素，例如{{1 }}，以检查#pswd_info li中某个元素内的列表元素。

来源：How to check if an element does NOT have a specific class?，https://api.jquery.com/length/

Answer 2

当所有li元素都具有“有效”类时，我想console.log（）消息。

因此，当没有li没有“有效”类时，您要记录一条消息。

然后只需检查选择器li:not(.valid)是否返回空列表即可。

使用香草JS，您会得到类似的东西：

if (document.querySelectorAll('li:not(.valid)').length === 0) {
    console.log("Your message");
}

Answer 3

当所有li元素都具有“有效”类时，我想console.log（）消息

您可以比较2个jQuery选择器的内容，以检查它们是否都具有特定的类，例如

if( $('#pswd_info ul li').length == $('#pswd_info ul li.valid').length){
    console.log('all li inside #pswd_info ul has the valid class');
}

Answer 4

您没有显示用于实际添加标签的任何逻辑，但这将在所有（5）个字段均为.valid时显示。但是，这种精确的方法并不能真正实现可持续性或可扩展性-最好删除无效标签，并寻找.invalid等于0的字段数。

$('.newPwInput,.confirmPwInput').keyup(function() {
  var validCount = $('#pwd_info ul li.valid').length; // Count how many elements have the valid tag
  console.log(validCount);
  if (validCount == 5) {
    console.log('All fields are valid');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="confirmPwInput" type="password" name="confirm_password">
<input class="newPwInput" type="password" name="new_password">


<ul id="#pswd_info">
  <li id="letter" class="invalid">At least
    <strong>one letter</strong>
  </li>
  <li id="capital" class="invalid">At least
    <strong>one capital letter</strong>
  </li>
  <li id="number" class="invalid">At least
    <strong>one number</strong>
  </li>
  <li id="length" class="invalid">Be at least
    <strong>10 characters</strong>
  </li>
  <li id="match" class="invalid">
    <strong>Passwords must match</strong>
  </li>
</ul>

检查所有元素中的特定类

4 个答案: