Question

在jQuery 1.8.3之前，我可以使用此代码获取空输入

$('#loginCard input[value=]').addClass('error');

在jQuery 1.8.3之后，这种语法不起作用。发生了什么变化？

我想在不使用函数的情况下使用jQuery 3.2.1做同样的事情，或者像这里一样：

$('#loginCard input').each(function (){ 
    if($(this).val()==""){
       $(this).addClass("error"); 
    }
});

遵循“少写，多做”的概念

Answer 1

在没有引号的情况下工作的事实是一个错误/特征，在1.8.3中甚至不允许这样做。

添加引号，例如。 [value=""]，它可以在过去或现在的任何jQuery版本中正常工作：

＆＃13;

$('#loginCard input[value=""]').addClass('error');

＆＃13;

.error { border: 1px solid #C00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loginCard">
  <input type="text" value="" />
</div>

＆＃13;

如果您需要使用属性选择器的替代方法，可以使用filter()，如下所示：

$('#loginCard input').filter(function() {
  return $(this).val().trim() == '';
}).addClass('error');

Answer 2

您的代码在Steel中运行此版本，我希望您的另一个问题影响此部分。您也可以在此处试用此代码https://jsfiddle.net/tzk4a593/或遵循此代码

＆＃13;

jQuery("#loginCard").find('input').each(function (){ 
    if($(this).val()==""){
       $(this).addClass("error"); 
    }
});

＆＃13;

input.error { border: 1px solid red; }

＆＃13;

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
<form id="loginCard" action="#">
  <input type="text" value="" name="one" />
   <input type="text" value="xxxxxx" name="some" />
  <input type="text" value="" name="two" />
  <input type="text" value="myVal" name="three" />
</form>

＆＃13;

Answer 3

尽管使用引号有效，但使用$item.val()并使用CSS-Selector并不相同，因为后者不会使用引号。尊重用户意见。因此，即使输入不再为空，CSS-Selector-Solution也会始终显示错误：

https://codepen.io/MattDiMu/pen/aKzbgw

jQuery得到空输入

3 个答案: