Javascript 使用jQuery设置元素的html内容，但要使用同一类的多个元素

正如标题所说，我试图使用jQuery设置元素的html内容。我将使用的上下文是当用户将鼠标悬停在表上的一行上时。悬停时，将显示一个弹出窗口，其中包含特定于该行的信息。但是，由于行包含相同的类，jQuery的$（）.html（）类将只显示与该类匹配的第一个元素的信息

下面是代码片段

$(".row").hover(
  function() {
    $(".popup").html(
      $(".content-to-be-displayed").html()
    );
    $(".popup").show();

    $(window).on("mousemove.tooltip", function(e) {
      var x = (e.clientX + 20) + 'px',
          y = (e.clientY + 20) + 'px';
      $(".popup").css({
        top: y,
        left: x,
      });
    });
  },
  function() {
    $(".popup").hide();
    $(window).off("mousemove.tooltip");
  }
);

部分HTML格式

<tr class= "row">
<div class="content-to-be-displayed" style="display: none;">
  <h4>Header:</h4>
  <% example_model.example.each do |example| %>
         <p>
           <%= 'erb plus html content' %>
         </p>
        <% end %>
     </div>
   </tr>

标题：

模板中的HTML

 <%= row do %>
 <thead>
 </thead>
 <tbody>
    <div class="popup"></div>
    <%= render partial: 'partial', collection: @data %>
 </tbody>
 <% end %>

使用$（this）和.find的组合

工作示例：

HTML

编辑：你的表格结构是无效的html，我印象深刻的是你的浏览器甚至显示了很多东西。请阅读这里的适当结构

在您给出的示例中，只需进行这些调整，使其有效（将内容添加到元素下的元素）

模板中的HTML

 <%= row do %>
 <thead>
 </thead>
 <tbody>
    <tr>
     <td>
      <div class="popup"></div>
     </td>
    </tr>

    <%= render partial: 'partial', collection: @data %>
 </tbody>
 <% end %>

部分HTML

<tr class= "row">
 <td>
   <div class="content-to-be-displayed" style="display: none;">
    <h4>Header:</h4>
    <% example_model.example.each do |example| %>
         <p>
           <%= 'erb plus html content' %>
         </p>
     <% end %>
    </div>
 </td>
</tr>

标题：

我不完全确定您想做什么，但我会尝试一下。 不要使用单独的弹出式元素（可以，但不干净）。 尝试将弹出数据存储在数据属性中

当您使用以多个元素为目标的类选择器时，您可以使用

this

变量引用当前元素，该变量指向触发事件的实际元素-通过这种方式，您可以使用它仅使用其属性/子元素等

下面是一个快速演示：

HTML:

---

你的HTML是什么样的，是

.popup

是

.row

的后代？你能给我们看看你的HTML吗？抱歉，刚刚添加了它。呈现的HTML不是模板，最好至少显示两行。HTML结构无效。我的朋友，我刚刚尝试了这个，但仍然没有运气。popup div只显示部分内容，也没有文本。我假设它不是t检索“要显示的内容”中包含的内容div.@buttonSmasher96我认为这更多地与你的html被各种各样的提升和无效有关。你不能把div直接放在tr元素下面。你需要重新构造它，使之在td之内，否则你会继续经历各种各样的怪事。把div放在桌子外面会更好吗？我不太确定该放在哪里说吧。你可以，但你仍然面临这样一个事实：你没有在你的表中使用标记，而这正是表的标记的定义。我将修改我的答案，这样你就可以了解我在说什么，并让你用它运行。非常感谢你，这很有帮助，它修复了它！由于inf，这个解决方案不会很好地工作div中包含了大量的erb和html格式

 <%= row do %>
 <thead>
 </thead>
 <tbody>
    <tr>
     <td>
      <div class="popup"></div>
     </td>
    </tr>

    <%= render partial: 'partial', collection: @data %>
 </tbody>
 <% end %>

<tr class= "row">
 <td>
   <div class="content-to-be-displayed" style="display: none;">
    <h4>Header:</h4>
    <% example_model.example.each do |example| %>
         <p>
           <%= 'erb plus html content' %>
         </p>
     <% end %>
    </div>
 </td>
</tr>

<table>
  <tr class="row" data-popup="Popup Row 1 Data">
    <td>Row 1</td>
    <td>Hover Me</td>
  </tr>
  <tr class="row" data-popup="Popup Row 2 Data">
    <td>Row 2</td>
    <td>Hover Me</td>
  </tr>
  <tr class="row" data-popup="Popup Row 3 Data">
    <td>Row 3</td>
    <td>Hover Me</td>
  </tr>
</table>
<div class="popup"></div>

$(function(){
  $(".row").hover(
    function() {
      var $this = $(this);
      $(".popup").text($this.data("popup"));
      $(".popup").css({ 
        top: $this.offset().top, 
        left:  $this.offset().left + $this.width() + 5,
        width: $this.width()
      }).show();
    },
    function() {
      $(".popup").hide();
    }
  );
});