Не работает селектор siblings Jquery

16 июня 2021, 16:50

Возникла проблема с селекторами.

Смотрел документацию, вроде все делаю правильно, но ни черта не работает.

Я хочу сделать удаление содержания формы регистрации при нажатии на крестик, а скрипт сделать универсальный, при нажатии на элемент с классом крестик (их много, у каждого input - свой) скрипт должен найти "соседа" с классом form_control и очистить его. Но при нажатии ничего не происходит.

Код ниже:
index.html:

<div class="form-group">
  <label for="exampleInputEmail1">Введите ваш login:</label>
  <input id='loginLog' class="form_control logins" type="text" placeholder="login" value="">
  <img src="Pictures/bucket.png" class='clearForm' alt="">
  <span id='error_login' class='errors'></span>
</div>

Script.js:

function clearForm(){
  $('.clearForm').click(()=>{
      $(this).siblings('.form_control').val('');
  })
}

Answer 1

В стрелочных функциях треяется контекст, this уже не тот) К тому же, вы обернули весь код для клика в дополнительную функцию, а её потом не вызвали.

$('.clearForm').on('click', function(){ 
  $(this).siblings('.form_control').val(''); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="form-group"> 
  <label for="exampleInputEmail1">Введите ваш login:</label> 
  <input id='loginLog' class="form_control logins" type="text" placeholder="login" value=""> 
  <button class='clearForm' alt="">x</button> 
  <span id='error_login' class='errors'></span> 
</div>

Это всё имеет смысл оборачивать в доп функцию, только если необходимые классы заранее не известны:

function clearForm(button, input){
  $('.' + button).on('click', function(){
    $(this).siblings('.' + input).val('');
  });
}// Сейчас функция создана и висит, ничего не делает.
clearForm( 'clearForm', 'form_control' ); // Вызов функции.