时间戳

首页 > 解决方案 > 如何使用 jQuery 获取类的下一个实例

jquery - 如何使用 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要显示帮助说明的元素时。它们作为 style 加载到页面上display:none。当我离开div.helpSpot（mouseout）时，我希望帮助说明消失。

我已经尝试了这些 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

有什么想法吗？谢谢！

PS一个切换解决方案将不胜感激。

标签： jquerycsshovertogglenext

解决方案

使用.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元素。

推荐阅读