jquery - 当 div 有程序员添加类时如何向上滚动

Question

我的代码有问题。当您单击 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/

Answer 1

^{问题是: $(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 >>*/ 以了解哪些行发生了更改}