Question

我需要在图标悬停时显示图标。问题是图标是通过循环显示的。意思是我有多个具有相同名称的图标。我确定我需要使用＆＃34;这个＆＃34;不知何故，只显示悬停在图标旁边的文字。但到目前为止，我没有这样做。

到目前为止我的基本代码。如何更改代码以显示文本，具体取决于正在悬停的图标？

$(".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>

Answer 2

我提出了一个有点简单的解决方案。其他建议的问题是我不能因为循环而为每个图标添加跨度（据我所知）。

我接受了这个：

  $(".material-icons").on({
        mouseenter: function () {
    var text = $(this).text();

    if (text === 'wifi'){
        text = 'Local Wifi'
    }

    if (text === 'local_laundry_service'){
        text = 'Laundry on site'
    }

      $(".showName").show()
      $(".showName").html(text)
        },
        mouseleave: function () {
         $(".showName").hide()
        }
    });

所以它正在做的是首先找到图标名称，如果图标名称是＆＃34; local_laundry_service＆＃34;等我正在更新文本，简单地说就是在现场洗衣服。显然，您必须为可能使用的每个图标执行此操作。代码不是很干，但我不知道怎么回事。

Jquery在悬停时显示文本 - 循环项目

2 个答案: