javascript - 为什么单击类元素​​时 jQuery 'closest' 不工作

Question

我的页面上有一些 JavaScript 生成的 HTML 代码。同一 HTML 代码的多个部分/实例正在生成并填充到页面。每个 HTML 部分中的一个 DIV 使用名为 openrole 的 CSS 类隐藏。我需要从下一个 openrole DIV 中删除隐藏属性，并在 DIV 上执行 slideToggle()。单击一个 Class 元素时，我试图找到 openrole 类的下一个元素，但运气不好。

我已经查看并测试了大量的替代方案，但仍然没有运气。我希望有人能在这里指出正确的方向。

$('#role_info').append(
  '<li>' +
  '<a href="javascript:void(0)">' +
  '<i class="menu-icon fa fa-file-text-o bg-yellow"></i>' +
  '<div class="menu-info">' +
  '<h4 class="control-sidebar-subheading applicantinfo">' + papplicant + plusicon + '</h4>' +
  '<p >' + prole + '</p>' +
  '</div>' +
  '</a>' +
  '<div class="col-md-12 openrole">' +
  '<div class="col-md-6">' +
  '<p class="text-left standard-text">Selskapsinformasjon</p>' +
  '<p id="company_address" class="text-left standard-text"><i class=" icon-padding fa fa-home"></i></p>' +
  '<p id="company_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>' +
  '<p id="company_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>' +
  '</div>' +
  '<div class="col-md-6">' +
  '<p class="text-left standard-text">Kontaktperson</p>' +
  '<p id="contact_name" class="text-left standard-text"><i class=" icon-padding fa fa-user"></i></p>' +
  '<p id="contact_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>' +
  '<p id="contact_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>' +
  '<div>' +
  '</div>' +
  '</li>'
)
$(document).on('click', '.applicantinfo', function() {

  $(this).closest('.openrole').slideToggle();

});

.openrole {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="role_info" class="control-sidebar-menu">
</ul>

控制台中不会生成任何错误消息。我想我只是无法弄清楚如何根据我的 HTML 结构编写正确的 JavaScript 代码

Answer 1

你的代码应该是这样的

$(this).closest('li').find('.openrole').slideToggle();

closest检查祖先。