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

【问题标题】：Jquery show text on hover - Looped ItemJquery在悬停时显示文本 - 循环项
【发布时间】：2017-11-01 13:54:18
【问题描述】：

我需要在图标悬停时显示文本。问题是图标通过循环显示。这意味着我有多个同名图标。我确定我需要以某种方式使用“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>

【问题讨论】：

请在您的图标附近添加html，包括您要显示的文本。
尝试使用$('.material-icons').on('hover', function() { var text = $(this).data('text'); }你的图标html一定是这样写的<img data-text="The text you want to display" src="">
文本需要以某种方式附加到图标上，正如@Abolarinstephen 所指出的（在数据属性中）或图标附近某处的隐藏元素（正如 XYZ 在他的回答中所假设的那样）。
您可以使用 data 属性将文本添加到 i 元素，例如 <i class="material-icons" data-text="icon 1"><%=rentals.amenities[i]%></i>。你的 js 就像 $('.material-icons').on('hover', function() { var text = $(this).data('text'); alert('text') }
@James - 我如何将它添加到我的循环中？嗯。

标签： javascript jquery html node.js hover

【解决方案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>

【讨论】：

谢谢！我看到了策略，但问题是我无法拥有“第一、第二、第三”跨度，对吗？我如何将它添加到我的循环中？

【解决方案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()
        }
    });

所以它所做的是首先找到图标名称，如果图标名称是“local_laundry_service”等，我将更新文本以简单地说 Laundry on site。显然，您必须为每个可能使用的图标执行此操作。不是很干的代码，但我不知道该怎么做。

【讨论】：