javascript - 鼠标悬停时显示每个表行的弹出窗口

Question

当我将鼠标移动到表格每行的文本上时，我想显示一个弹出窗口。我使用的代码是这样的:

    $.fn.ready(function() {
        $('#pizzaname').hover(function() {
            $('#popup').show();
        }, function() {
            $('#popup').hide();
        });
    });

<%= provide(:title, "Menu") %>

<h1>Le nostre pizze</h1>

<% if user_signed_in? && current_user.rank == "ADMIN" %>
    <%= link_to 'Inserisci una nuova pizza nel Menu', new_product_path %>
<% end %>

  <div class="panel panel-default" %>
    <div class="panel-heading">
      <h4>Lista delle pizze</h4>
    </div>
    <div class="panel-body">
      <table class="table-striped">
        <tr>
          <td><strong>Nome</strong></td>
          <td><strong>Ingredienti</strong></td>
          <td><strong>Prezzo</strong></td>
          <% if user_signed_in? && current_user.rank == "ADMIN" %>
            <td></td>
            <td></td>
            <td></td>
          <% end %>
        </tr>
        <% @products.each do |product| %>
          <tr>
            <td id="pizzaname">
              <%= product.nome_pizza%>
              <div id="popup"
                   style=" height: 50px;
                           width: 200px;
                           display: none;
                           position: absolute;" >
                <div class="panel panel-default">
                  <div class="panel-body">
                    <%= if File.exist?("#{Rails.root}/app/assets/images/#{product.id}pizza.jpg")
                          image_tag("#{product.id}pizza.jpg", width: '100%')
                        else
                          image_tag("no-pizza.png", width: '100%')
                        end %>
                  </div>
                </div>
              </div>
            </td>
            <td><em><%= product.ingredienti %></em></td>
            <td><%= number_to_currency(product.prezzo, unit: "€") %></td>
            <% if user_signed_in? && current_user.rank == "ADMIN" %>
                <td><%= link_to 'Mostra', product, class: "btn btn-default" %></td>
                <td><%= link_to 'Modifica', edit_product_path(product), class: "btn btn-default" %></td>
                <td><%= link_to 'Cancella', product, method: :delete, data: { confirm: 'Sei sicuro?' }, class: "btn btn-default" %></td>
            <% end %>
          <% end %>
        </tr>
      </table>
    </div>
  </div>

此代码正确地向我显示了弹出窗口，但仅适用于第一行。如果我将鼠标移到第二行、第三行或任何其他行的名称上，则不会出现弹出窗口。做了一些测试，更改了ID，但找不到错误。有什么解决办法吗？

Answer 1

在处理相同类型的多个元素时(在您的情况下是表中多行中的文本)，请始终在标记中使用类而不是 ID。然后在Javascript中相应地绑定(bind)函数。

为了帮助您更好地理解，ID 是唯一标识符。就像您的护照号码可以唯一地识别您的身份一样。世界上只有一个人拥有这个数字。同样，每个元素的 ID 应该是唯一的。另一方面，类用于识别相似的实体。例如，一个类(class)的经济学学生将共享一些共同的属性(例如上午 9 点至上午 10 点都学习宏观经济学)。因此，在您的情况下，元素应该具有相同的类名(因为每个元素上的悬停效果)将是一个公共(public)属性。

所以你的 HTML 会像这样改变以使用类而不是 ID

.....
<td class="pizzaname">
    <%= product.nome_pizza%>
       <div class="popup" style=" height: 50px;">
.....

那么你的 JS 就会是

  $('.pizzaname').hover(function() {
    $(this).find('.popup').show();
  }, function() {
    $(this).find('.popup').hide();
  });