Question

正如标题所说，我正在尝试使用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 in partial

<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 %>

Answer 1

使用$（this）和.find

的组合

工作示例：https://jsfiddle.net/osvLs54L/

HTML

    <div class="row">
        <div class="content-to-be-displayed">
            Weee1
        </div>
    </div>
    <div class="row">
        <div class="content-to-be-displayed">
            Weee2
        </div>
    </div>
    <div class="row">
        <div class="content-to-be-displayed">
            Weee3
        </div>
    </div>

    <div class="popup">

    </div>

JQuery的

$(".row").hover(
 function() { $(".popup").html( $(this).find('.content-to-be-displayed').html());}
);

编辑：您的表结构是无效的HTML，我印象深刻，您的浏览器甚至显示了很多东西。请在这里阅读正确的结构。 https://css-tricks.com/complete-guide-table-element/

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

模板中的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>

Answer 2

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

当您使用一个以多个元素为目标的类Selector时，可以使用this变量引用当前元素，该变量指向触发事件的实际元素 - 这样您就可以使用它仅使用它它的属性/儿童等...

以下是快速演示： JSnippet Demo

HTML：

<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>

JS：

$(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();
    }
  );
});

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

2 个答案: