Jquery Next() 在使用 table 时没有正确突出显示下一个元素
Jquery Next() not highlighting next element correctly when using a table
我有一个 table,每一行代表一首歌。
单击歌曲时,父 td 应使用 .active class 突出显示为浅蓝色,如果之前突出显示了任何歌曲,则应删除父 td 的 .active class .
这部分工作正常,用这个表示 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 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');
});
});
如果你能帮我解决这个问题,我将不胜感激。我觉得这应该很容易,但我似乎做不到。
谢谢!
技巧是获取当前歌曲的行索引,加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>
在您的代码中,每个 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
)- 无需获取然后全部限制在第一个。
所有这些都会使您的 fiddle 表现出预期的效果,但是,如果您想在每个 tr
中定位 td
,则必须添加 .find('td')
以从检索到的 tr
中获取 td
,例如 this。这里唯一更改的行是在单击下一步时添加 class 的行,现在是:current.parent().next('tr').find('td').addClass('active');
将 $('.songs').parents('tr').removeClass('active');
重构到它自己的函数中也会稍微清除您的代码并使其更易于遵循,这是一个好习惯! (对于使用变量存储返回的 JQuery DOM 对象也是 +1 - var current = $('tr.active');
- 代码清晰和效率的另一个好习惯,特别是当你使用更复杂的 DOM 结构和函数)
是这样的吗? 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');
});
});
我有一个 table,每一行代表一首歌。
单击歌曲时,父 td 应使用 .active class 突出显示为浅蓝色,如果之前突出显示了任何歌曲,则应删除父 td 的 .active class .
这部分工作正常,用这个表示 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 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');
});
});
如果你能帮我解决这个问题,我将不胜感激。我觉得这应该很容易,但我似乎做不到。
谢谢!
技巧是获取当前歌曲的行索引,加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>
在您的代码中,每个 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
)- 无需获取然后全部限制在第一个。
所有这些都会使您的 fiddle 表现出预期的效果,但是,如果您想在每个 tr
中定位 td
,则必须添加 .find('td')
以从检索到的 tr
中获取 td
,例如 this。这里唯一更改的行是在单击下一步时添加 class 的行,现在是:current.parent().next('tr').find('td').addClass('active');
将 $('.songs').parents('tr').removeClass('active');
重构到它自己的函数中也会稍微清除您的代码并使其更易于遵循,这是一个好习惯! (对于使用变量存储返回的 JQuery DOM 对象也是 +1 - var current = $('tr.active');
- 代码清晰和效率的另一个好习惯,特别是当你使用更复杂的 DOM 结构和函数)
是这样的吗? 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');
});
});