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

您当前代码中的问题是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>

Answer 2

试试这个：）

$("#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 s 。

使用mouseenter使得代码不会在您移动鼠标时触发，而它已经在tr内，并且只有在输入tr时才会触发。使用mouseleave处理离开元素的鼠标

使用jQuery移动DOM元素

2 个答案: