使用jQuery設置元素的html內容，但使用同一類的多個元素

正如標題所示，我試圖使用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 %>

來源

2017-07-14 buttonSmasher96

什麼是你的HTML一樣，是'.popup'的'.row'的後裔？ – James

你能告訴我們你的HTML嗎？ –

對不起，剛添加它。 – buttonSmasher96

使用$（本）和組合。找到

工作例如：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/

在你給的例子，只是initiallity進行這些調整，因此是有效的（

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>

來源

2017-07-14 18:11:36

我剛試過這個，但仍然沒有運氣。彈出的div只顯示部分文字，也沒有文字。我假設它不檢索包含在「將要顯示的內容」內的內容。 – buttonSmasher96

@ buttonSmasher96我認爲這與你的html被各種頂起和無效做的更多。你不能把div直接放在tr元素下面。你需要重新組織td，否則你會繼續經歷各種怪異 –

將div放在桌子外面會更好嗎？我不確定把它放在哪裏。 – buttonSmasher96

我不完全確定你在做什麼 - 但我會試試不要使用單獨的彈出窗口el （可以，但它不乾淨）。嘗試將彈出數據存儲在數據屬性中。

當您使用以多個元素爲目標的類選擇器時，可以使用指向觸發事件的實際元素的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(); 
    } 
); 
});

來源

2017-07-14 18:23:19

由於div中包含的信息，這個解決方案不會工作得太好，它有很多erb和html – buttonSmasher96

使用jQuery設置元素的html內容，但使用同一類的多個元素

回答

相關問題