当 div 添加了程序员 class 时如何向上滚动

Question

我的代码有问题。当您单击 next 时，它会进行计算并添加一个 class scrollup（在本例中，它是前三个帖子）。当您单击上一步时，如果 div 有 class .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/

Answer 1

^{问题是： $(this) 在您的代码中的某些位置需要 curr}

if ($(this).hasClass("scrollup")){ .. $(this) 在您的代码行中引用 #prev-item 按钮，而前一个按钮没有 scrollup class .. scrollup class 用于 current class 元素的 item/parent 元素.. 因此对于 $(this) if 语句将不起作用。需要 curr.hasClass("scrollup")
在 !$(this).hasClass("first") 中同样的事情应该是 !curr.hasClass("first") 并在 if 语句之前使用 var curr 行 .. 请参阅下面的代码

$("#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 >>*/注释，知道哪些行改了}

当 div 添加了程序员 class 时如何向上滚动

How to scrollup when a div has a programmerly added class

jquery

scrolltop