Перемещение элемента DOM Использование jQuery

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 s в в tr вы нависаете над.

с помощью mouseenter делает так, чтобы код не срабатывал при перемещении мыши, пока он уже находится внутри tr, и только при вводе в tr. Используйте mouseleave для управления мышью, оставляя элемент

Answer 2

Проблема в вашем текущем коде appendTo Вы используете это неправильно. то есть: вы прилагая все tr в каждом span Но вы должны добавить только td часть в соответствующем span

Так вот моя идея сделать это.

• При наведении добавить новые данные как html.
• Убедитесь, что вы извлечь соответствующие данные и добавить его в соответствующий диапазон, используя eq(0) для доступа к td на основе индекса

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