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

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

任何想法吗?谢谢你！

注:如果能提供切换解决方案，我将不胜感激。

Answer 1

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