Работа с элементом DOM

263
30 августа 2017, 17:30

Не знаю, правильно ли я охарактеризовал свой вопрос, но суть такова: Есть структура

<div class="row">
<span>Example</span><input id="last_name" class="validate valid">
</div>

Ищу input так: при клике на example вызываю $(this).parents('div.row').find('input#last_name.validate.valid'); Как присвоить input'у класс invalid?

this это example - т.е. span

Answer 1

Вводных явно маловато, но предположу, что одновременно и valid и invalid быть не может, пускай будет такой вариант:

$('span').on('click', function() { 
  $(this).siblings('.validate').toggleClass('valid invalid'); 
});
.validate.valid { 
  border-color: green; 
} 
 
.validate.invalid { 
  border-color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="row"> 
 <span>Example</span> 
 <input id="last_name" class="validate valid"> 
</div>

Answer 2

При данной разметке, достаточно смотреть на следующий элемент относительно того, на который кликнули и делать с ним манипуляции

$('.row').on('click', 'span', function(){ 
  $(this).next('input').removeClass('valid').addClass('invalid'); 
});
.row { 
  margin:10px; 
} 
 
.valid { 
  border: 3px solid green; 
} 
 
.invalid { 
  border: 3px solid red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
  <span>Example</span> 
  <input id="last_name" class="validate valid"> 
</div> 
 
<div class="row"> 
  <span>Example2</span> 
  <input id="last_name2" class="validate valid"> 
</div> 
 
<div class="row"> 
  <span>Example3</span> 
  <input id="last_name3" class="validate valid"> 
</div>

Небольшой toggle

$('.row').on('click', 'span', function(){ 
  var input = $(this).next('input');     
  input.toggleClass('valid invalid'); 
});
.row { 
  margin:10px; 
} 
 
.valid { 
  border: 3px solid green; 
} 
 
.invalid { 
  border: 3px solid red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
  <span>Example</span> 
  <input id="last_name" class="validate valid"> 
</div> 
 
<div class="row"> 
  <span>Example2</span> 
  <input id="last_name2" class="validate valid"> 
</div> 
 
<div class="row"> 
  <span>Example3</span> 
  <input id="last_name3" class="validate valid"> 
</div>

READ ALSO
Контент страницы показать на другой?
javascript

Контент страницы показать на другой?

Здравствуйте ! Помогите на html страницы выводить контент другой страницыIframe не катит, так как надо чтобы было еще кликабельно, а здесь получается...

 428
Как изменить частоту звука в JS?
javascript

Как изменить частоту звука в JS?

Мне нужно, чтобы по исполнению функции аудио не только замедлялось, но и изменяло частоту звука

 401
Фраймворк Codeignither. Что означает строчка?
PHP

Фраймворк Codeignither. Что означает строчка?

Ребят подскажите что означает эта строчка только по русски)

 354
Вопрос по конфигу PHPMailer
PHP

Вопрос по конфигу PHPMailer

В примере на странице https://githubcom/PHPMailer/PHPMailer в самом низу блока с e-mail адресами есть 2 адреса: addCC и addBCC - для чего они нужны?

 361