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小提琴：https://jsfiddle.net/openbayou/425Leuq6/

Answer 1

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

if ($(this).hasClass("scrollup")){ .. $(this)在此处的代码中指的是#prev-item按钮，而上一个按钮没有scrollup类.. {{1 }}类用于scrollup类元素的item / parent元素。.因此，对于current，if语句将不起作用。它必须为$(this)
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>时已注释掉，以了解哪些行已更改}

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

1 个答案: