选择一个元素以在jQuery中显示错误消息

popol 发表于 Dev

灰：

我有这个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');

你知道为什么吗？

谢谢。

斯瓦蒂语：

您可以使用jquery的closest()和find()方法获取最接近的值.row，然后获取error-messagediv。

演示代码：

$('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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。