使用表时，Jquery Next(）未正确突出显示下一个元素

Jquery Next() not highlighting next element correctly when using a table

本文关键字：显示 元素 下一个 Jquery Next      更新时间：2024-02-05

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

当单击某首歌曲时，父td应使用.active类高亮显示为浅蓝色，如果之前高亮显示了任何歌曲，则应删除父td的.active类别。

此部分工作良好，并用以下jquery表示：

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

我还想有一个下一个按钮和一个上一个按钮。这就是我遇到问题的地方。当单击下一个按钮时，列表上的下一首歌曲应该高亮显示，而之前高亮显示的歌曲应该取消高亮显示（我正在使用class.active来进行高亮显示和取消高亮显示）。此部分不工作：

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

这是jsfiddle链接：

jsfiddle链接

这是我的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');
    });
});

如果你能帮我解决这个问题，我将不胜感激。我觉得这应该很容易，但我似乎无法做到。

谢谢！

诀窍是获得当前歌曲的行索引，加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>

类似的东西？http://jsfiddle.net/y5ntap04/3/

您需要转到DOM，然后在所有兄弟姐妹所在的位置，您可以转到next()。

此外，还为您添加了上一个按钮。

$().ready(function () {
    $(".songs").click(function () {
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function () {
        $('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
    });
    $('#previous_button').click(function () {
        $('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
    });
});

在代码中，每个td都有自己的tr，这意味着没有下一个td可去。

您应该调整您的jquery以关注行，如在这个fiddle（如下所示）中

$().ready(function() {
    $(".songs").click(function(){
        $('.songs').parents('tr').removeClass('active');
        $(this).parents('tr').addClass('active');
    });
    $('#next_button').click(function(){
        var current = $('tr.active');
        $('.songs').parents('tr').removeClass('active');
        current.next('tr').addClass('active');
    });
});

您还会注意到，我使用的是.next()，它只会获取下一个元素或与参数匹配的下一个元件（在本例中为tr）-无需获取所有，然后仅限于第一个。

所有这些都会使你的fiddle按预期运行，然而，如果你想在每个tr中瞄准td，你必须添加.find('td')，才能从检索到的tr中获得td，就像这样。这里唯一更改的行是在单击next时添加类的行，现在是：current.parent().next('tr').find('td').addClass('active');

将$('.songs').parents('tr').removeClass('active');重构为它自己的函数也会稍微清除代码，使其更易于遵循，这是一个好习惯！（还有+1，用于使用变量存储返回的JQuery DOM对象-var current = $('tr.active');-另一个提高代码清晰度和效率的好习惯，尤其是在处理更复杂的DOM结构和函数时）

相关文章：