Блог

Прежде всего, я хотел бы извиниться за ужасный заголовок, но это был лучший способ, который я мог придумать, чтобы подвести итог моей проблеме.

В настоящее время я использую jQuery скрипт, который проверяет, на blur на input:text , что текстовое значение ввода больше определенного значения. Если нет, ввод будет выделен красным цветом, но то, что я хотел бы сделать дальше, — это иметь a <p> в соседнем столбце, чтобы изменить его текст.

Мой HTML выглядит так:

 <tr>
      <td width="15%"><label for="example">Hello world</label></td>
      <td width="70%"><input type="text" class="" id="example" value=""/></td>
      <td width="15%"><p name="example"></p></td>
 </tr>
  

И мой jQuery / css :

 <style type="text/css">
    .fail{
        border:2px red solid;
    }   
    </style>

    <script type="text/javascript">
    /* Inline, onBlur validation 
    Text */
    $('input:text').blur(function() {
        if ($(this).val().length <= 2) {
            $(this).attr('class', 'fail');
            }else{$(this).attr('class', '');}
    });
    </script>
  

Возможно blur ли каким-то образом вызвать следующий элемент с тем name же именем, что и у выбранного ввода id , а затем изменить его текст? Я знаю, что это должна быть сложная динамическая головоломка для решения, но это то, что мне действительно нужно.

В прошлом я добивался того же эффекта, повторяя код для каждого элемента, но здесь это не совсем подходит.

Спасибо за любой совет, который вы можете мне дать!

zzzzBov верен, однако было бы лучше использовать контекст для повышения эффективности и / или имя тега. Кроме того, добавьте переменную, которая ссылается на $(this).

 var $this = $(this);
$('p[name="' $this.attr('id') '"]', $this.closest('tr')).text('foo bar baz'); 
  

Отредактировано после комментария
Разница между приведенным выше ответом и ответом zzzzBov заключается в:

 $('[name="' $(this).attr('id') '"]')  
// will start traversing the DOM starting at the beginning of the 
// document. Largest search.

$('p[name="' $this.attr('id') '"]')
// will first call getElementsByTagName and try to find a match, smaller search.

$('p[name="' $this.attr('id') '"]', $this.closest('tr'))
// will only search the contents of the closest('tr') tag 
// that is an ancestor of your input. Even smaller search.
  

Вообще говоря, более конкретная работа с селекторами jQuery может улучшить производительность. Кроме того, использование переменной для хранения выбранных элементов, таких как var $this = $(this); или var $myElement = $('#myElement') , более эффективно, чем создание одних и тех же селекторов снова и снова. Помните, что jQuery настолько эффективен, насколько это возможно с селекторами, но вы должны использовать их в своих возможностях.

В контексте обратного blur вызова:

 $('[name="' $(this).attr('id') '"]').text('foo bar baz');