使用jQuery移動DOM元素

Question

對於學校任務，我們被要求使用jQuery編寫代碼，這樣當您將鼠標懸停在表格中的某個元素上時，它將獲取數據並將其放入三個不同的span元素中。我覺得我很接近，但它不能正常工作，現在它只是在頁面上造成一團糟。

<table id="games"> 
     <thead> 
      <tr><th>Titel</th><th>Genre</th><th>Årstal</th></tr> 
     </thead> 
     <tbody id="games_tbody"> 
      <tr class="horror"><td>Outlast</td><td>Horror</td><td>2013</td></tr> 
      <tr class="rpg"><td>Dragon Age: Inquisition</td><td>Role-playing Game</td><td>2014</td></tr> 
      <tr class="rpg"><td>Skyrim</td><td>Role-playing Game</td><td>2011</td></tr> 
      <tr class="horror"><td>Amnesia: The Dark Descent</td><td>Horror</td><td>2010</td></tr> 
      <tr class="simulator"><td>Scania Truck Driving Simulator</td><td>Simulator</td><td>2012</td></tr> 
      <tr class="horror"><td>Five Nights at Freddy’s</td><td>Horror</td><td>2014</td></tr> 
      <tr class="simulator"><td>Sims 4</td><td>Simulator</td><td>2014</td></tr> 
      <tr class="rts" id="last"><td>Warcraft III: Reign of Chaos</td><td>Real-time Strategy</td><td>2002</td></tr> 
     </tbody> 
    </table> 

    <a href="" id="delete_game" type="button" class="btn">Delete Game</a> 

    <div class="game-of-the-moment"> 
     <h2>Game of the <em>Moment</em></h2> 
     <p> 
      <span id="moment_title"></span> 
      <span id="moment_genre"></span> 
      <span id="moment_year"></span> 
     </p> 
    </div> 

jQuery的我至今

$("#games_tbody tr").on("mouseover", function(){ 
    $ (this).appendTo("#moment_title"); 
    $ (this).appendTo("#moment_genre"); 
    $ (this).appendTo("#moment_year"); 
}); 

Answer 1

試試這個:)

$("#games_tbody tr").on("mouseenter", function(){ //mouseenter is a simpler thing to use 
    $("#moment_title").text($(this).children().eq(0).text()); 
    $("#moment_genre").text($(this).children().eq(1).text()); 
    $("#moment_year").text($(this).children().eq(2).text()); 
}); 

在這裏，我選擇了不同的跨度，然後使用this內找到的的td小號tr你正在盤旋。

使用mouseenter使其代碼不會觸發當您移動鼠標，而它已經在tr內，並且只有在輸入tr時纔會觸發。使用mouseleave來處理鼠標離開元素

Answer 2

您當前的代碼中的問題是appendTo您正在使用它錯誤的方式。即：要附加整個tr到每個span但是你要只有它的td部分附加在各自span

因此，這裏是我做這件事的想法。

• 懸停時將新數據添加爲html。
• 確保您提取適當的數據，並使用eq(0)基於索引

$(function() { 
 
    $("#games_tbody tr").on("mouseover", function() { 
 
    $("#moment_title").html($(this).find('td:eq(0)').text()); 
 
    $("#moment_genre").html($(this).find('td:eq(1)').text());; 
 
    $("#moment_year").html($(this).find('td:eq(2)').text());; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="games"> 
 
     <thead> 
 
      <tr><th>Titel</th><th>Genre</th><th>Årstal</th></tr> 
 
     </thead> 
 
     <tbody id="games_tbody"> 
 
      <tr class="horror"><td>Outlast</td><td>Horror</td><td>2013</td></tr> 
 
      <tr class="rpg"><td>Dragon Age: Inquisition</td><td>Role-playing Game</td><td>2014</td></tr> 
 
      <tr class="rpg"><td>Skyrim</td><td>Role-playing Game</td><td>2011</td></tr> 
 
      <tr class="horror"><td>Amnesia: The Dark Descent</td><td>Horror</td><td>2010</td></tr> 
 
      <tr class="simulator"><td>Scania Truck Driving Simulator</td><td>Simulator</td><td>2012</td></tr> 
 
      <tr class="horror"><td>Five Nights at Freddy’s</td><td>Horror</td><td>2014</td></tr> 
 
      <tr class="simulator"><td>Sims 4</td><td>Simulator</td><td>2014</td></tr> 
 
      <tr class="rts" id="last"><td>Warcraft III: Reign of Chaos</td><td>Real-time Strategy</td><td>2002</td></tr> 
 
     </tbody> 
 
    </table> 
 

 
    <a href="" id="delete_game" type="button" class="btn">Delete Game</a> 
 

 
    <div class="game-of-the-moment"> 
 
     <h2>Game of the <em>Moment</em></h2> 
 
     <p> 
 
      <b>Title:</b><span id="moment_title"></span> <br/>   
 
      <b>Genre:</b><span id="moment_genre"></span><br/> 
 
      <b>Arstal:</b><span id="moment_year"></span> 
 
     </p> 
 
    </div>