如何使用 jQuery 获取类的下一个实例

问题描述

我有这个标记：

  <div class="forPadding">
    <div class="helpSpot"><i class="far fa-question-circle"></i></div>
    <label class="required" for="my_name">Name</label>
    <input class="inputPadding required" id="my_name" name="name" placeholder="Enter your name" type="text" required>
  </div>
  <div class="helpInstructions">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Proin placerat ut quam varius porttitor. Nunc congue aliquam pharetra. Aenean condimentum dignissim nibh ut commodo. Morbi soDales mi a felis imperdiet,convallis eleifend tortor egestas. Etiam aliquam,eros in vestibulum feugiat,velit enim eleifend nisl,non mattis sem nisl id ex. Morbi diam neque,malesuada vel est vel,tristique commodo nibh. Integer in bibendum quam. Proin vestibulum ex non soDales dictum. Etiam sit amet facilisis risus,in ullamcorper sapien. Integer vitae est quam.</div>

当我悬停（鼠标悬停）div.helpSpot 元素时，我想显示帮助说明。它们以样式 display:none 的形式加载到页面上。当我离开 div.helpSpot（鼠标移出）时，我希望帮助说明消失。

我尝试了这些 jQuery 命令，但无法实现我的目标：

$('.helpSpot').on('mouSEOver',function() {
  console.log('mouse over');
  // $('.helpInstructions').css( 'display','block' ); // WORKS BUT FOR ALL CLASS NAME INSTANCES
  //$(this).closest('div').next().find('.helpInstructions').css( 'display','block' ); // DOES NOT WORK
  //$(this).closest('.helpInstructions').css( 'display','block' ); // DOES NOT WORK
  //$(this).find('.helpInstructions').attr('class').css( 'display','block' ); // DOES NOT WORK
  //      $(this).closest('div').find('.helpInstructions').css( 'display','block' ); // DOES NOT WORK
  $(this).closest('div.forPadding').find('.helpInstructions').css('display','block'); // DOES NOT WORK
});
$('.helpSpot').on('mouSEOut',function() {
  console.log('mouse out');
  // $('.helpInstructions').css( 'display','none' ); // WORKS BUT FOR ALL CLASS NAME INSTANCES
  //$(this).closest('div').next().find('.helpInstructions').css( 'display','none' ); // DOES NOT WORK
  //$(this).closest('.helpInstructions').css( 'display','none' ); // DOES NOT WORK
  //$(this).find('.helpInstructions').attr('class').css( 'display','none' ); // DOES NOT WORK
  //      $(this).closest('div').find('.helpInstructions').css( 'display','none' ); // DOES NOT WORK
  $(this).closest('div.forPadding').find('.helpInstructions').css('display','none'); // DOES NOT WORK
}); // hover listener on help spots

有什么想法吗？谢谢！

附言非常感谢切换解决方案。

解决方法

使用.next()。您可以选择添加一个选择器，以确保它与错误的类不匹配。

并且您可以使用 .hover() 组合鼠标悬停和鼠标移出事件。

$(".helpSpot").hover(function() {
  console.log("mouse over");
  $(this).closest(".forPadding").next(".helpInstructions").show();
},function() {
  console.log("mouse out");
  $(this).closest(".forPadding").next(".helpInstructions").hide();
});

.helpInstructions {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="forPadding">
  <div class="helpSpot"><i class="far fa-question-circle">help</i></div>
  <label class="required" for="my_name">Name</label>
  <input class="inputPadding required" id="my_name" name="name" placeholder="Enter your name" type="text" required>
</div>
<div class="helpInstructions">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Proin placerat ut quam varius porttitor. Nunc congue aliquam pharetra. Aenean condimentum dignissim nibh ut commodo. Morbi sodales mi a felis imperdiet,convallis eleifend tortor egestas. Etiam
  aliquam,eros in vestibulum feugiat,velit enim eleifend nisl,non mattis sem nisl id ex. Morbi diam neque,malesuada vel est vel,tristique commodo nibh. Integer in bibendum quam. Proin vestibulum ex non sodales dictum. Etiam sit amet facilisis risus,in ullamcorper sapien. Integer vitae est quam.</div>

当您尝试 $(this).closest('div').next().find('.helpInstructions') 时，您很接近，但是 .find() 查找后代，它不会匹配它从中搜索的元素，即 .helpInstructions 元素。