javascript - Jquery 在悬停时显示文本 - Looped Item

Question

我需要在鼠标悬停时显示图标的文本。问题是图标通过循环显示。这意味着我有多个同名图标。我确定我需要以某种方式使用“this”来仅在悬停的图标旁边显示文本。但是到目前为止，我还没有这样做。

到目前为止我的基本代码。我将如何更改代码以根据悬停在哪个图标上来显示文本？

$(".material-icons").on({
        mouseenter: function () {
         console.log('Show Name for this Icon')
        },
        mouseleave: function () {
         console.log('Hide Name for this Icon')
        }
    });

感谢任何帮助!

编辑:这是用于显示图标的循环。

   <li id='topSection' class="list-group-item active">Amenities </li>
             <li id="amnetiesBox" class="list-group-item">
              <% for(var i=0; i<rentals.amenities.length; i++){ %>
              <i class="material-icons"><%=rentals.amenities[i]%></i>
               <% } %>
            </li>
              </li> 

被选中的图标示例:

<input type="checkbox" name="amenities" value="personal_video"><span>TV</span>
<input type="checkbox" name="amenities" value="call"><span>Phone</span>

Answer 1

您可以使用 $(this) 并显示与该目标元素相关的文本

$(".material-icons").on({
        mouseenter: function () {
            $(this).next("span").show()
        },
        mouseleave: function () {
           $(this).next("span").hide()
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="material-icons" ><span>Hover </span></div> <span style="display:none">first</span>
<div class="material-icons" ><span>Hover</span></div> <span style="display:none">second</span>
<div class="material-icons" ><span>Hover</span></div> <span style="display:none">third</span>