Блог

Главная - Вопросы по программированию - Выберите элемент для отображения сообщения об ошибке в jQuery

Выберите элемент для отображения сообщения об ошибке в jQuery

#jquery

#jquery

Вопрос:

У меня есть этот HTML:

     $('a[data-action="get-resume"]').click(function(event) {
        var client_conditions = $('[name="client_conditions"]');
        if(client_conditions.prop('checked') == false) {
            client_conditions.next('.error-message').removeClass('hide');
            return false;
        }
    });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
        <div class="col-xl-12 mb-4">
            <div>
                <input id="client_conditions" class="checkbox-style" name="client_conditions" type="checkbox">
                <label for="client_conditions" class="checkbox-style-1-label">Lorem ipsum.</label>
            </div>
            <div class="error-message text-danger hide">Required</div>
        </div>
    </div>
    <a href="#" data-action="get-resume">Validate</a>

При нажатии на Validate него проверяется, client_conditions установлен флажок или нет.

Он работает хорошо, но сообщение об ошибке не отображается.

 client_conditions.next('.error-message').removeClass('hide');

Вы знаете, почему ?

Спасибо.

Комментарии:

1. Я не уверен, что .next оставляет текущую глубину DOMs. Так что, возможно, он найдет элементы только внутри родительского div?

Ответ №1:

Вы можете использовать closest() и find() метод jquery, чтобы приблизиться .row , а затем получить error-message div .

Демонстрационный код :

 $('a[data-action="get-resume"]').click(function(event) {
  var client_conditions = $('[name="client_conditions"]');
  if (client_conditions.prop('checked') == false) {
    //get closest .row and then find error message div
    client_conditions.closest(".row").find('.error-message').removeClass('hide');
    return false;
  } else {
    client_conditions.closest(".row").find('.error-message').addClass('hide');
  }
});  
 .hide {
  display: none
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xl-12 mb-4">
    <div>
      <input id="client_conditions" class="checkbox-style" name="client_conditions" type="checkbox">
      <label for="client_conditions" class="checkbox-style-1-label">Lorem ipsum.</label>
    </div>
    <div class="error-message text-danger hide">Required</div>
  </div>
</div>
<a href="#" data-action="get-resume">Validate</a>