JQuery получить пустой ввод

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

Ваш код работает в стали В этой версии, я надеюсь, ваша другая проблема затронула этот раздел.Вы также можете попробовать этот код здесь https://jsfiddle.net/tzk4a593/ или следовать этому коду

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

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

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

Answer 2

Несмотря на то, что использование кавычек работает, использование $item.val() и использование CSS-селектора не то же самое, так как последний не учитывает пользовательский ввод.Поэтому CSS-Selector-Solution всегда будет отображать ошибку, даже если ввод больше не пуст:

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

Answer 3

Факт, что это работало без кавычек, является ошибкой / особенностью, которая не должна была быть даже допущена в 1.8.3.

Добавьте кавычки, например.[value=""], и он отлично работает в любой версии jQuery, в прошлом или настоящем:

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

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

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

Если вам нужен альтернативный метод для селектора атрибута, вы можете использовать filter(), например:

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