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

这是因为pizzaname和popup应该是类，而不是ID。在HTML中更改此内容：

<td class="pizzaname"
<div class="popup"

你的jQuery应该是：

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

了解详情here。

Answer 2

当处理同一类型的多个元素时（在您的情况下，表中多行中的文本）总是在标记中使用类而不是ID。然后在Javascript中相应地绑定函数。

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

所以你的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();
  });

在鼠标悬停时为每个表行显示弹出窗口

2 个答案: