我的代码有问题。当您单击 next
时,它会进行计算并添加一个 scrollup
类(在本示例中,它是前三个帖子)。当您单击上一个时,如果 div 具有 .scrollup
类,则假定向上滚动。单击上一个时,即使该项目具有 .scrollup
,它也不会向上滚动。
示例 HTML:
<button id="prev-item">Previous</button>
<button id="next-item">Next</button>
<div class="main">
<div class="item first"><div class="current">item 1</div></div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
</div>
JS:
$("#next-item").on("click", function () {
var curr = $('.main .current').parent(); //find .current's parent
var $children = $('.main').children();
var firstcal = $children.length;
var actual = firstcal - 7
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
if (curr.next().length > 0) {
$('.main').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
}
});
$("#prev-item").on("click", function () {
if (!$(this).hasClass("first")) {
var curr = $('.main .current').parent(); //find .current's parent
if (curr.next().length > 0) {
if ($(this).hasClass("scrollup")) {
$('.main').animate({scrollTop: '-=35px'}, 400);
}
curr.children('.current').contents().unwrap(); // remove .current
curr.prev().wrapInner('<div class="current"></div>'); // add it to the next element
}
}
});
JS fiddle :https://jsfiddle.net/openbayou/425Leuq6/
最佳答案
问题是: $(this)
需要在代码中的某些位置为 curr
if ($(this).hasClass("scrollup")){
..$(this)
在您的代码行中引用#prev-item
按钮,上一个按钮没有scrollup
类。scrollup
类用于当前的 item/parent 元素
类元素..所以使用$(this)
if 语句将不起作用。它需要是curr.hasClass("scrollup")
- 同样的
!$(this).hasClass("first")
应该是!curr.hasClass("first")
并使用var curr
位于if
语句之前的行..请参阅下面的代码
$("#next-item").on("click", function(){
var curr = $('.main .current').parent(); //find .current's parent
var $children = $('.main').children();
var firstcal = $children.length;
var actual = firstcal - 7
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
if (curr.next().length > 0) {
$('.main').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
}
});
$("#prev-item").on("click", function(){
/* HERE >>*/ var curr = $('.main .current').parent(); //find .current's parent
/* HERE >>*/if (!curr.hasClass("first")) {
if (curr.next().length > 0) {
/* HERE >>*/ if (curr.hasClass("scrollup")){
$('.main').animate({scrollTop: '-=35px'}, 400);
}
curr.children('.current').contents().unwrap(); // remove .current
curr.prev().wrapInner('<div class="current"></div>'); // add it to the next element
}
}
});
.current { color: red; }
.item { padding: 7px; }
.main { height: 265px; overflow: auto; }
.scrollup { border-left: 5px solid blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="prev-item">Previous</button>
<button id="next-item">Next</button>
<div class="main">
<div class="item first"><div class="current">item 1</div></div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
</div>
查找代码中注释的 /* HERE >>*/
以了解哪些行发生了更改
关于jquery - 当 div 有程序员添加类时如何向上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56369546/