<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>
<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>
<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>
JS
$(document).keydown(function(e){
total = $('.postitle').length;
if (e.keyCode == 38 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() > 0) {
e.preventDefault();
listup();
}
else if (e.keyCode == 40 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() <= total-2) {
e.preventDefault();
listdown();
}
});
function listup(){
var prev = $('.pmarked').prevAll('.postitle:first');
$('.pmarked').removeClass('pmarked');
prev.addClass('pmarked');
}
function listdown(){
var next = $('.pmarked').nextAll('.postitle:first');
$('.pmarked').removeClass('pmarked');
next.addClass('pmarked');
}
所以我想通过按 arrow- 将
和.pmarked
类添加/删除 .postitle
(而不是 .title
)键盘上的向上向下箭头
。
上面的代码工作正常,但前提是 prev/next
项位于同一个 .part
div 内。
如何跳转到上一个或下一个.part
div?
最佳答案
试试这个,你选择元素的方式必须改变
$(document).keydown(function(e) {
let index = $('.postitle').toArray().indexOf($('.pmarked')[0]);
total = $('.postitle').length;
if (e.keyCode == 38 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() > 0) {
e.preventDefault();
listup(index - 1);
} else if (e.keyCode == 40 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() <= total - 2) {
e.preventDefault();
listdown(index > total - 2 ? 0 : index + 1);
}
});
function listup(index) {
var prev = $('.postitle').eq(index);
$('.pmarked').removeClass('pmarked');
prev.addClass('pmarked');
}
function listdown(index) {
var next = $('.postitle').eq(index);
$('.pmarked').removeClass('pmarked');
next.addClass('pmarked');
}
.pmarked {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>
<div class='part'>
<div class='title'>title</div>
<div class='postitle pmarked'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>
<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>
我得到了当前元素索引
let index = $('.postitle').toArray().indexOf($('.pmarked')[0]);
并通过 index-1
计算前一个元素索引,并通过 index > Total - 2 计算下一个元素索引? 0:索引+1
关于javascript - 添加/删除上一个或下一个父级中的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49597061/