Как я могу фильтровать, используя текущее значение текстового поля в селекторе jQuery? - PullRequest
Новая
       15

Как я могу фильтровать, используя текущее значение текстового поля в селекторе jQuery?

2 голосов
/ 02 апреля 2010

У меня есть скрипт проверки, который проверяет атрибуты data- *, чтобы определить, какие поля являются обязательными. Если элемент имеет атрибут «data-required-if» (в качестве значения имеет селектор jQuery), он проверяет, найдены ли какие-либо элементы, соответствующие этому селектору. Если они найдены, поле обязательно для заполнения. Это делает что-то похожее на следующее: 

$('[data-required-if]').each(function () {
  var selector = $(this).attr('data-required-if'),
      required = false;

  if ( !$(selector).length ) {
    required = true;
    // do something if this element is empty
  }
});

Это прекрасно работает, но есть проблема. Когда вы используете селектор атрибута для фильтрации на основе текущего значения текстового поля, он действительно фильтрует начальное значение текстового поля. 

<input
  type='text'
  id='myinput'
  value='initial text'
/>

<input
  type='text'
  id='dependent_input'
  value=''
  data-required-if="#myinput[value='']"
/>

// Step 1: type "foobar" in #myinput
// Step 2: run these lines of code:
<script>
  $('#myinput').val()                  //=> returns "foobar"
  $('#myinput[value="foobar"]').length //=> returns 0
</script>

Я понимаю, почему он это делает. JQuery, вероятно, использует getAttribute () в фоновом режиме. Есть ли другой способ фильтрации на основе текущего значения поля ввода с использованием чисто селекторов jQuery?

Ответы [ 3 ]

2 голосов
/ 02 апреля 2010

Другой вариант, который у вас есть, - создание селектора, например: 

jQuery.expr[':'].hasValue = function(a){ return $(a).val() !== ""; };

Тогда вы можете использовать это так: 

$('#myinput:hasValue').length  //"1" if anything is typed in there
0 голосов
/ 02 апреля 2010

В качестве опции вы можете добавить атрибут ко всем входным тегам со значением по умолчанию. 

<input type='text'
       id='myinput'
       value=''
       initialValue = 'initial text'
/>

Затем, когда вы используете селектор, вы должны сравнить фактическое значение input с его атрибутом initialValue

0 голосов
/ 02 апреля 2010

Ну, вы можете написать обработчик "change" для поля "myinput", в котором значение будет сохранено в каком-либо другом атрибуте, а затем написать свой селектор для его использования.

Я выложил демонстрационную / тестовую страницуна http://gutfullofbeer.net/foobar.html, чтобы вы могли увидеть, может ли это решить вашу проблему. 

<script>
  $(function() {
    $('#clickee').click(function() {
      $('#count').text('' + $('#txt[bar=foo]').length);
    });
    $('#txt').change(function() {
      $(this).attr('bar', $(this).val());
    });
  });
</script>

... 

<body>
  <input type='text' id='txt'>
  <button id='clickee'>click</button>

  <span id='count></span>
</body>
...