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

Question

我有这个标记：

  <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

有什么想法吗？谢谢！

P.S。切换解决方案将不胜感激。

Answer 1

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

并且您可以使用 .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 元素。

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

How to get the next instance of a class using jQuery

jquery

css

hover

toggle

next