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溢出行数的方式执行带有行数的模数，它将从头开始：< / p>

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

Answer 2

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

你应该调整你的jquery以专注于行，如this 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()只会grab the next element或与参数匹配的下一个元素（在本例中为tr） - 不需要得到所有然后限制到第一个。

所有这些都会让你的小提琴按预期行事，但是，如果你想定位td中每一个tr内的.find('td')你的小提琴必须添加td才能从tr中获取current.parent().next('tr').find('td').addClass('active');，例如this。这里唯一更改的行是在下一个点击时添加类的行，现在是：$('.songs').parents('tr').removeClass('active');

将var current = $('tr.active');重构为它自己的功能也会清除你的代码并让它更容易遵循，这是一个好习惯！（使用变量来存储返回的JQuery DOM对象也是+1 - {{1}} - 代码清晰度和效率的另一个好习惯，特别是当您使用更复杂的DOM结构和函数时，这是一个很好的习惯）

Answer 3

这样的东西？ 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');
    });
});

Jquery Next（）在使用表时没有正确突出显示下一个元素

3 个答案: