javascript - 使用表格时，Jquery Next() 无法正确突出显示下一个元素

Question

我有一个表格，每行代表一首歌曲。

当点击一首歌曲时，父 td 应该用 .active 类突出显示为浅蓝色，如果之前突出显示任何歌曲，则父 td 的 .active 类应该被删除。

这部分工作正常，并用这个 jquery 表示:

$(".songs").click(function(){
    $('.songs').parents('td').removeClass('active');
    $(this).parents('td').addClass('active');
});

我还想要一个下一个按钮和一个上一个按钮。这是我遇到问题的地方。单击下一个按钮时，列表中的下一首歌曲应该突出显示，并且之前突出显示的歌曲应该取消突出显示(我正在使用 .active 类来突出显示和取消突出显示)。这部分不起作用:

$('#next_button').click(function(){
    var current = $('td.active');
    $('.songs').parents('td').removeClass('active');
    current.nextAll('td:first').addClass('active');
});

这是 jsfiddle 链接:

jsfiddle Link

这是我的 html 代码:

<table id="song_table">
    <thead id="song_thead">
    <tr>
        <th id="table_head">Songs</th>
    </tr>
    </thead>
    <tbody id="song_tbody">
        <tr>
            <td class="td_songs">
                <a class="songs">
                    1
                </a>
            </td>
        </tr>
        <tr>
            <td class="td_songs">
                <a class="songs">
                    2
                </a>
            </td>
        </tr>
    </tbody>
</table>
<div id="next_button">
    <p id="next_text">Next Button</p>
</div>

这是我的 CSS:

.active{
    background-color: #D9FAFA;
}
table{
    text-align: center;
    height: 100px;
    width: 200px;
}
#table_head{
    text-align: center;
}
#next_button{
    height: 100px;
    width: 200px;
    background-color: lightgreen;
}

这是我的jquery

$(document).ready(function() {
    $(".songs").click(function(){
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function(){
        var current = $('td.active');
        $('.songs').parents('td').removeClass('active');
        current.nextAll('td:first').addClass('active');
    });
});

如果您能帮我解决这个问题，我将不胜感激。我觉得这应该很容易，但我似乎无法让它发挥作用。

谢谢!

Answer 1

技巧是获取当前歌曲的行索引，加1，然后对行数进行取模，这样如果当前行+1超出行数，则会从头开始:

$().ready(function() {
    $(".songs").click(function(){
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function(){
        //here .parent() will get the current <tr>
        //.parent().index() will get the index of the current <tr>
        var currentID = $('td.active').parent().index();
        //here .parent() will get the <tr>
        //.parent().parent() will get the <tbody>
        //.parent().parent().children() will get all the rows
        //.parent().parent().children().length will get the row count
        var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
        $('.songs').parents('td').removeClass('active');
        $('td').eq(nextID).addClass('active');
    });
});

.active{
    background-color: #D9FAFA;
}
table{
    text-align: center;
    height: 100px;
    width: 200px;
}
#table_head{
    text-align: center;
}
#next_button{
    height: 100px;
    width: 2d00px;
    background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="song_table">
                <thead id="song_thead">
                <tr>
                    <th id="table_head">Songs</th>
                </tr>
                </thead>
                <tbody id="song_tbody">
                    <tr>
                        <td class="td_songs">
                            <a class="songs">
                                1
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_songs">
                            <a class="songs">
                                2
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_songs">
                            <a class="songs">
                                3
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_songs">
                            <a class="songs">
                                4
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
<div id="next_button">
    <p id="next_text">Next Button</p>
</div>